swift中WKWebView和JS交互实现

在Swift中加载HTML网页有两个view，分别是WKWebView和UIWebView，这里我使用的是WKWebView

这里分享一下我的写法：

1、定义变量WKWebView：

lazy var webView: WKWebView = {///偏好设置let preferences = WKPreferences()preferences.javaScriptEnabled = truelet configuration = WKWebViewConfiguration()configuration.preferences = preferencesconfiguration.selectionGranularity = WKSelectionGranularity.characterconfiguration.userContentController = WKUserContentController()// 给webview与swift交互起名字，webview给swift发消息的时候会用到configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "logger")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "myPosition")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "getRegistionId")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "getUserInfo")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "saveUserInfo")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "scanCode")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "alertl")var webView = WKWebView(frame: CGRect(x: 0,y: 44,width: UIScreen.main.bounds.width,height: UIScreen.main.bounds.height-20),configuration: configuration)// 让webview翻动有回弹效果webView.scrollView.bounces = false// 只允许webview上下滚动webView.scrollView.alwaysBounceVertical = truewebView.navigationDelegate = self//自定义userAgent,用于在浏览器中判断是否在app打开webView.customUserAgent = "iosApp"return webView}()

注意，此加载网页的视图控制器需要实现这两个协议：WKNavigationDelegate,WKScriptMessageHandler

注：这里说明一下这行代码：configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "logger")

configuration在上面代码区域可以看到，是定义的一个WKWebViewConfiguration() ,

然后调用它的userContentController.add() ，这里简单说明一下参数：第一个参数位置WeakScriptMessageDelegate协议，这里是固定写法，

主要看第二个参数name，name的值需要注意，它是一个字符串，就是我们在js中需要通过这个name，然后点上swift中原生的方法完成交互功能，js中所有需要需要调用swift原生方法的语句，都需要在swift中定义一个对月的name，

下面介绍如何在swift中处理js调用原生方法时判断调用的是哪一个方法，判断方法也是通过上面定义的name去区分，可以携带参数：

要重写下面的这个函数：userContentController ，注意参数

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {///接收js调用方法///在控制台中打印html中console.log的内容,方便调试let body = message.bodyprint("--------js交互了------------")if message.name == "logger" {print("JS Log \(body)")EWToast.showBottomWithText(text: "JS Log: \(body)")return}///message.name是约定好的方法名,message.body是携带的参数switch message.name {case "myPosition":///不接收参数时直接不处理message.body即可,不用管Html传了什么self.myDistance()case "getRegistionId":self.getRegistId()case "getUserInfo":self.getUserInfo()case "saveUserInfo":self.saveInfo(array: message.body as! [AnyObject])case "scanCode":// 打开相机self.openCemera()case "alertl"://这个项目中单独的Toast提示EWToast.showBottomWithText(text: "触发成功")default:break}}

仔细一看，每一个case 判断的字符串就是上面我们定义的name，在js中调用时，它会自动根据你调用原生方法时用的是哪一个，他就会走对应的判断，然后在case中我们就可以调用原生的方法了，

在js向原生传递参数时，可以传递数组，这里我用的是数组传递，没看到单个数据怎么传递的，

写法：window.webkit.messageHandlers.saveUserInfo.postMessage(["abcd",1])

注意代码标红的就是我们在swift中定义的name，后面的postMessage这个随意，看你想做什么用就写什么，没什么特殊要求，这里是传递消息，主要是参数，我用数组，传递不一样的数据类型也可以，

在swift中接收参数可以看到我是这么写的：self.saveInfos(array: message.body as! [AnyObject])

这样就可以了！去试试吧！

在多说一句：原生调用js方法：

webView.evaluateJavaScript("setToken('\(token ?? "")')", completionHandler: nil)

setToken是js提供的function函数如：

function setToken(token){
//操作
}

swift中WKWebView和JS交互实现相关推荐

iOS WKWebView和JS交互的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMe ...
[Swift]WKWebView与JS交互
本文通过一个实例介绍了几种App与Web交互的情形: 1.同步返回参数给Web. 比如App提供方法返回token, Web中在需要的时候即时拿取. 2.Web异步调用App提供的方法. 使用这种方式 ...
WKWebview与js交互
应用场景: 项目中在原有h5界面中嵌入js代码,在指定位置加入第三方分享此部分为js点击分享绑定部分代码,这里的事件名需要h5和前端协商好一致. window.webkit.messageHandl ...
Swift中viewWeb执行JS
2019独角兽企业重金招聘Python工程师标准>>> // 自动填充 - webVIew的注入,直接通过js修改本地浏览器中缓存的页面内容// 让webView执行js@obj ...
ios传值给js_深入剖析 iOS 与 JS 交互
前言 Web 页面中的 JS 与 iOS Native 如何交互是每个 iOS 猿必须掌握的技能.而说到 Native 与 JS 交互,就不得不提一嘴 Hybrid. Hybrid 的翻译结果并不是很 ...
ios webview html交互卡死,iOS 之webview 的js交互（alert、confirm、prompt）弹窗造成界面卡死...
概述:当iOS客户端中webView 与js交互,在主线程执行js脚本时,而js脚本存在alert().confirm().prompt()这三种弹窗时会造成iOS界面卡死. 1.造成卡死时的代码如下 ...
OC WKWebView的JS与OC交互、Cookie管理
完全抄录:iOS中UIWebView与WKWebView.JavaScript与OC交互.Cookie管理看我就够(中) ####WKWebView 是Apple于iOS 8.0推出的WebKit中的 ...
ios 使用webview 查找_iOS开发WKWebView与JS的交互
iOS8以后,Apple公司推出了WKWebView,对比之前的UIWebView不论是处理速度还是内存性能,都有了大幅度的提升! 那么下面我就分享一下WKWebView与JS的交互. 首先使用WKW ...
UIWebView和WKWebView的使用及js交互
web页面和app直接的交互是很常见的东西,之前尝试过flex和js的相互调用以及android和js的相互调用,却只有ios没试过,据说比较复杂.周末花了点时间研究了一下,确实和其他的不太一样,但是 ...

swift中WKWebView和JS交互实现

swift中WKWebView和JS交互实现相关推荐

最新文章

热门文章