login.html 代码

<!DOCTYPE html>

<html>

    <head>

        <title>使用JavaScript</title>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <link rel="stylesheet" type="text/css" href="login.css" />

        <script type = "text/javascript" src = "login.js"></script>

    </head>

    <body>

        <div>

            <form>

                <input type="text" />

                <input type="button" value="按钮" onclick="fun();"/>

                <input type="button" value="Alert" onclick="alert();"/>

                <input type="button" value="Confirm" onclick="confirm();"/>

                <input type="button" value="TextInput" onclick="prompt('提示','占位符');"/>

            </form>

        </div>

        <span id="id"></span>

    </body>

</html>

login.css代码     样式随意，做做样子而已

div{

    width:200px;

    height:30px;

    position:absolute;/*绝对坐标*/

    left:50px;

    top:50px;

}

login.js代码

function fun(){

    var message = {

        'method':'hello',

        'param':'刘冠'

    };

    window.webkit.messageHandlers.webViewApp.postMessage(message);

}

function mess(){

    alert("My First JavaScript");

}

ViewController.swift代码

//

//  ViewController.swift

//  第一个测试程序

//

//  Created by liuguan on 16/11/16.

//  Copyright © 2016年 刘冠. All rights reserved.

//

import UIKit

import WebKit

class ViewController: UIViewController,WKNavigationDelegate,WKUIDelegate,WKScriptMessageHandler{

    var wkWebview:WKWebView?;

    override func viewDidLoad() {

        super.viewDidLoad()

    /**js调用app 分三步

         1.app注册handler

         2.app处理handler

         2.js调用

        */

        let config = WKWebViewConfiguration()

        //注册js方法

        config.userContentController.addScriptMessageHandler(self, name: "webViewApp")

        wkWebview = WKWebView(frame: self.view.bounds, configuration: config)

        wkWebview!.navigationDelegate = self

        wkWebview!.UIDelegate = self

        self.view.addSubview(wkWebview!)

        //加载本地页面

        wkWebview!.loadRequest(NSURLRequest(URL: NSURL.fileURLWithPath(NSBundle.mainBundle().pathForResource("login", ofType: "html")!)))

        //允许手势，后退前进等操作

        wkWebview!.allowsBackForwardNavigationGestures = true

    }

   // 实现js调用iOS的handle委托

    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage){

        //接收传过来的消息，从而决定APP调用的的方法

        let dic = message.body as! Dictionary<String,String>

        if dic["param"] == "刘冠"{

     //app调用js

        wkWebview!.evaluateJavaScript("document.getElementById('id').innerText=document.getElementById('id').outerText+'完成|';",completionHandler: nil)

            wkWebview!.evaluateJavaScript("mess();",completionHandler: nil)

        }

    }

//注意：wkWebview默认不会弹框，js中有三种弹框类型

    //js的alert方法调用

    func webView(webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: () -> Void) {

        let alert = UIAlertController(title: "提示", message: message, preferredStyle: UIAlertControllerStyle.Alert)

        alert.addAction(UIAlertAction(title: "确认", style: UIAlertActionStyle.Default, handler: { (alertAction) -> Void in

            completionHandler()

        }))

        self.presentViewController(alert, animated: true) { () -> Void in

        }

    }

    //js的confirm方法调用

    func webView(webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: (Bool) -> Void) {

        let alert = UIAlertController(title: "提示", message: message, preferredStyle: UIAlertControllerStyle.Alert)

        alert.addAction(UIAlertAction(title: "取消", style: UIAlertActionStyle.Cancel, handler: { (alertAction) -> Void in

            completionHandler(false)

        }))

        alert.addAction(UIAlertAction(title: "确认", style: UIAlertActionStyle.Default, handler: { (alertAction) -> Void in

            completionHandler(true)

        }))

        self.presentViewController(alert, animated: true) { () -> Void in

        }

    }

    //js的prompt方法调用

    func webView(webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: (String?) -> Void) {

        let alert = UIAlertController(title: prompt, message: "", preferredStyle: UIAlertControllerStyle.Alert)

        alert.addTextFieldWithConfigurationHandler { (textFiled) -> Void in

            textFiled.text = defaultText

        }

        alert.addAction(UIAlertAction(title: "完成", style: UIAlertActionStyle.Default, handler: { (alertAction) -> Void in

            completionHandler(alert.textFields![].text)

        }))

        self.presentViewController(alert, animated: true) { () -> Void in

        }

    }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }

}

WKWebView与JavaScript交互基础的更多相关文章

  1. （基础篇）PHP与JavaScript交互

    一.了解javascript Javascript是脚本编程语言,支持WEB应用程序的客户端和服务器端构件的开发,在WEB系统中得到了非常广泛的应用. 1. 什么是javascript Javascr ...

  2. WKWebView与JS交互，UIWebView+JavascriptCore和JS交互

    最近一直在做有关Swift和JavaScript交互的程序,所以有关UIWebView和WKWebView在使用上的差别在此总结下: UIWebView: (1)创建 var webView: UIW ...

  3. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  4. 三丶JavaScript 的基础学习(一)

      知识预览 BOM对象 DOM对象(DHTML) 8 实例练习 JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言 ...

  5. 快速掌握JavaScript面试基础知识(三)

    译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...

  6. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  7. JavaScript的基础学习(一)

    一.JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase ...

  8. CEF与JavaScript交互读取电脑信息

    CefSharp中c#和JavaScript交互读取电脑信息 介绍 CEF是由Marshall Greenblatt于2008年创建的基于Google Chromium的BSD许可开源项目.与主要关注 ...

  9. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

随机推荐

  1. 【代码笔记】iOS-正在加载

    一,效果图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...

  2. win7 64位下vs不能以管理员身份运行的问题解决

    开发机上安装了VS6.0/2008/2010/2013,之前一直是正常的,突然莫名其妙不能以管理员身份运行(除了VS6),报"application cannot start.", ...

  3. Masonry和FDTemplateLayoutCell 结合使用示例Demo

    我们知道,界面布局可以用Storyboard或Xib结合Autolayout实现,如果用纯代码布局,比较热门的有Masonry.SDAutoLayout,下面的简单demo,采用纯代码布局,实现不定高 ...

  4. Which language is best, C, C++, Python or Java?什么编程语言最好

    Either you fuck the life or the life fucks you. 转载自 quora 大致翻译一下,不喜勿喷,谢谢支持!以下是内容: I have used each o ...

  5. jenkins / ant / jmeter 持续集成接口自动化

    1. 将 jmeter 脚本放在/var/lib/jenkins/workspace/Jmeter_auto/jmxpath路径下 2. 点击http://jk.facebank.net.cn/job ...

  6. 绘制扇形效果线条小Bug解决

    绘制线条基本代码: 变量: CPoint m_ptOrigin;//起点坐标 bool m_bTrue;//检查鼠标左键是否按下 CPoint m_ptOldOrigin;//记录上一次绘制终点坐标, ...

  7. CSS3文字渐变效果

    background-clip + text-fill-color下的实现 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: <h2 class= ...

  8. [LeetCode] Delete Node in a Linked List 删除链表的节点

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  9. [LeetCode] Binary Tree Upside Down 二叉树的上下颠倒

    Given a binary tree where all the right nodes are either leaf nodes with a sibling (a left node that ...

  10. [LeetCode] Set Matrix Zeroes 矩阵赋零

    Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. click ...