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. How To Join XLA_AE_HEADERS and RCV_TRANSACTIONS? [ID 558514.1]

    Applies to: Oracle Inventory Management - Version: 12.0.6<max_ver> and later   [Release: 12 an ...

  2. Android 内存泄漏的一些情况。

    最近在维护代码,发现一个自定义View(这个View是在一个AsyncTask的工作线程doInBackground中新建的,在UI线程onPostExecute中添加进window中的)经常会泄漏内 ...

  3. iOS之获取经纬度并通过反向地理编码获取详细地址

    _locationManager = [[CLLocationManager alloc] init]; //期望的经度 _locationManager.desiredAccuracy = kCLL ...

  4. 从零自学Hadoop(19)：HBase介绍及安装

    阅读目录 序 介绍 安装 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 上一篇, ...

  5. [AC自动机]【学习笔记】

    Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)To ...

  6. .数据库连接池技术：DBCP和C3P0

    数据库连接池技术:DBCP和C3P0 1.什么是数据库连接池 已知的方法是需要访问数据库的时候进行一次数据库的连接,对数据库操作完之后再释放这个连接,通常这样业务是缺点很明显的: 用户每次请求都需要向 ...

  7. Java To CSharp源代码转换

    前言 开发环境 客户端:Unity3D开发(C#) 服务器:Java (基于Java7) 日   期:2016年09月 需求说明 部分服务器的部分逻辑功能在客户端实现一遍,可以简单的理解为服务器的部分 ...

  8. 属性类：Properties

    属性是程序中经常出现的形式. 在类集中提供了一种专门的Properties类. public class Propertiesextends Hashtable<Object,Object> ...

  9. jenkins 入门教程(下)

    接上回继续学习jenkins,这次主要来看一些疑难杂症: 一.yum install安装方式 除了直接java -jar jenkins.war方式,还可以用yum安装,这种方式下提供了更多的可配置选 ...

  10. [LeetCode] Partition Equal Subset Sum 相同子集和分割

    Given a non-empty array containing only positive integers, find if the array can be partitioned into ...