WKWebView与JavaScript交互基础

<!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>

div{

    width:200px;

    height:30px;

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

    left:50px;

    top:50px;

}

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交互基础的更多相关文章

（基础篇）PHP与JavaScript交互
一.了解javascript Javascript是脚本编程语言,支持WEB应用程序的客户端和服务器端构件的开发,在WEB系统中得到了非常广泛的应用. 1. 什么是javascript Javascr ...
WKWebView与JS交互，UIWebView+JavascriptCore和JS交互
最近一直在做有关Swift和JavaScript交互的程序,所以有关UIWebView和WKWebView在使用上的差别在此总结下: UIWebView: (1)创建 var webView: UIW ...
JavaScript入门基础
JavaScript基本语法 1.运算符运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
三丶JavaScript 的基础学习(一)
知识预览 BOM对象 DOM对象(DHTML) 8 实例练习 JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言 ...
快速掌握JavaScript面试基础知识(三)
译者按: 总结了大量JavaScript基本知识点,很有用! 原文: The Definitive JavaScript Handbook for your next developer interv ...
JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向什么是事件事件就是文档或浏览器窗口中发 ...
JavaScript的基础学习(一)
一.JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase ...
CEF与JavaScript交互读取电脑信息
CefSharp中c#和JavaScript交互读取电脑信息介绍 CEF是由Marshall Greenblatt于2008年创建的基于Google Chromium的BSD许可开源项目.与主要关注 ...
【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习一变量 1 变量命名规则 Camel 标记法首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

随机推荐

ABAP游标的使用
在Oracle,SQLServer中游标的使用是经常的,所以在ABAP不懂是不行的...... 1.声明游标 OPEN CURSOR [WITH HOLD] <c> FOR SEL ...
AgilePoint实例属性修改
流程实例中的参数存放在WF_CUSTOM_ATTRS表的WF_CUSTOM_ATTRS字段,为ntext类型,里面存放的是XML,不能直接修改 update [APData].[dbo].[WF_ ...
android SQLite数据库总结
SQLite SQLite是一种超轻量级的嵌入式数据库,大小只有几百KB,但是其语法支持标准SQL语法,同时还遵循了数据库的ACID事务,所以学过其他数据库的开发人员都很容易掌握其使用. sql语法就 ...
SQL优化技术分析-3：SQL语句索引的利用
使用索引来更快地遍历表.默认情况下建立的索引是非聚集索引,但有时它并不是最佳的.在非聚集索引下,数据在物理上随机存放在数据页上.合理的索引设计要建立在对各种查询的分析和预测上.一般来说: 有大量重复 ...
iOS系列基础篇 08 文本与键盘
iOS系列基础篇 08 文本与键盘目录: 1. 扯扯犊子 2. TextField 3. TextView 4. 键盘的打开和关闭 5. 打开/关闭键盘的通知 6. 键盘的种类 7. 最后再扯两句 ...
Oracle XMLTable 使用教程与实例
从Oracle 10g开始,甲骨文公司新增了XQuery和XMLTable两个功能作为处理XML的武器. XMLQuery一样,您可以使用XQuery语言构造XML数据和查询XML和关系数据.你可以使 ...
Hbase入门教程--单节点伪分布式模式的安装与使用
Hbase入门简介 HBase是一个分布式的.面向列的开源数据库,该技术来源于 FayChang 所撰写的Google论文"Bigtable:一个结构化数据的分布式存储系统".就像 ...
2015-12-01 SQL查询语句基础
1.查询全体学生的学号与姓名select sno,snamefrom student;3.查询全体学生的详细信息select *from student;4.查询全体学生的姓名及其出生年份select ...
RabbitMq 集群搭建
实验环境: 操作系统为 Centos 7.2 IP hostName 192.168.190.132 node132 192.168.190.139 node139 192.168.190.1 ...
linux 守护程序小记(指定进程不存在则启动 )
最近想在debian 下做个守护进程.用于守护指定的程序一直处于运行状态.网上查了下,有Crontab方式和写脚本执行方式. Crontab Crontab 是系统自带的,类似于Windows的计划任 ...

WKWebView与JavaScript交互基础

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

随机推荐

热门专题