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

随机推荐

InfoPath错误，此文档库已被重命名或删除
在使用InfoPath发布表单,发布到SharePoint服务器报错,如下介绍: 环境:Windows 2012 DateCenter + Sql 2012 + SharePoint 2013 + O ...
Android中使用ViewPager实现屏幕页面切换和页面切换效果
之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpag ...
用AVFoundation自定义相机拍照
自定义拍照或者录视频的功能,就需要用到AVFoundation框架,目前我只用到了拍照,所以记录下自定义拍照用法,视频用法等用上了再补充,应该是大同小异 demo在这里:https://github. ...
细分java环境中的JDK、JVM、JRE
细分java环境中的JDK.JVM.JRE 近来小看了下Android,扑面而来一堆概念JDK.JVM.JRE.SDK.NDK.ADT.缕了一下,其中JDK.JVM.JRE是java环境的东西,而SD ...
Percona TokuDB
Percona TokuDB Percona TokuDB 1. TokuDB说明 2. TokuDB安装 3. 使用TokuDB 3.1 快速插入和富索引 3.2 聚集sec ...
Microsoft Visual SourceSafe 6.0 无法关联项目
最近遇到Microsoft Visual SourceSafe 6.0 安装好以后, 无法关联项目,导致无法进行版本控制,研究以后,发现需要运行一个程序,在安装目录下 ..\Visual Source ...
iOS开发常用代码块（第二弹）
GCD定时器 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, ); dispat ...
easy_UI 投票列表
首先我们考虑一下在项目投票种用到的属性(ID,投票标题,备选项目,参与人数) entity package cn.entity; public class GridNode { private Lon ...
ubuntu-Linux系统读取USB摄像头数据(uvc)
这几天在做小车的过程中,需要用到图像采集.我想现在用的摄像头是UVC免驱的.根据国嵌的教程中有一个gspca摄像头的程序.我发现把gspca的采集程序用到uvc上时,在显示图像的时候提示没有huffm ...
[LeetCode] Strobogrammatic Number II 对称数之二
A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

WKWebView与JavaScript交互基础

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

随机推荐

热门专题