ios UIWebView与js的简单交互swift3版

简介: 在开发过程中,我们可能遇到ios代码与js交互的情况,本人第一次使用遇到了很多坑,这里纪录一下,方便自己,也方便需要的人。1.第一步先建一个接口(协议)并继承JSExport这里实现两个方法提供给js调用的方法importJavaScriptCo...

在开发过程中,我们可能遇到ios代码与js交互的情况,本人第一次使用遇到了很多坑,这里纪录一下,方便自己,也方便需要的人。

1.第一步先建一个接口(协议)并继承JSExport

这里实现两个方法提供给js调用的方法

importJavaScriptCore

@objcprotocolSwiftJavaScriptDelegate:JSExport{

funcshow()

funcshowAlert(_str:String,_msg:String)

}

2.第二步需要写一个类去实现上一步的接口(协议)(注意:1.这里必须要继承nsobject否则会报错,2.如果要传参数的话一定要写成

类似与 funcshowAlert(_str:String,_msg:String),_ str:String 这个“_”一定要加不然无法调用(调用无效果),在swift3.0中就这样,其他版本没有测试就不清楚了。

@objcclassSwiftJavaScriptModel:NSObject,SwiftJavaScriptDelegate{

funcshow() {

print("js调用我了")

}

funcshowAlert(_str:String,_msg:String){

print("js调用我了:",str,msg)

}

}

3.开始在控制器中测试

//

//ViewController.swift

//WEBJSTest

//

//Created by admin on 17/8/5.

//Copyright © 2017年tdin360. All rights reserved.

//

importUIKit

importWebKit

importJavaScriptCore

classViewController:UIViewController,UIWebViewDelegate{

varcontext:JSContext!

overridefuncviewDidLoad() {

super.viewDidLoad()

self.setupUI()

}

funcsetupUI( ) {

self.view.addSubview(webView)

leturl =Bundle.main.path(forResource:"index", ofType:"html")

self.webView.loadRequest(URLRequest(url:URL(string:url!)!))

self.webView.delegate=self

self.view.addSubview(btn)

}

lazyvarwebView:UIWebView={

letwebView =UIWebView(frame:self.view.bounds)

returnwebView

}()

//用于点击调用js的按钮

lazyvarbtn:UIButton={

letbtn =UIButton(frame:CGRect(x:0,y:300,width:100,height:40))

btn.backgroundColor=UIColor.blue

btn.setTitle("调用js", for: .normal)

btn.addTarget(self, action:#selector(onClick), for: .touchUpInside)

returnbtn

}()

//swift调用js

funconClick(){

letf =context?.objectForKeyedSubscript("swift")

_=f?.call(withArguments: [["name":"admin","pass":"fdsfds"]])

}

funcwebViewDidFinishLoad(_webView:UIWebView) {

letmodel =SwiftJavaScriptModel()

//获取context

context=self.webView.value(forKeyPath:"documentView.webView.mainFrame.javaScriptContext")as!JSContext

//这里注册一个标示给js访问

context.setObject(model, forKeyedSubscript:"model"as(NSCopying&NSObjectProtocol)!)

leturl =Bundle.main.url(forResource:"index", withExtension:"html")

context.evaluateScript(try?String(contentsOf: url!, encoding:String.Encoding.utf8))

context.exceptionHandler= {

(context, exception)in

print("exception错误@", exception ??"")

}

}

overridefuncdidReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

}

}


4.html代码

<html>

<meta charset="utf-8">

<title>ios js交互测试</title>

<head>

<script>

//这个提交给swift调用并传参数

 function swift(obj){

alert("swift调用我了"+obj["name"]+"--"+obj["pass"]);

            }

</script>

</head>

<body>

<button onclick="model.showAlert('参数1','参数2')">js调用swift有参的方法</button>

<button onclick="model.show()" >js调用swift无参数方法</button>

</body>

</html> 

整个过程就是这样的,这里贴了源码,如果遇到问题欢迎留言,有什么更好的方法欢迎一起交流。

目录
相关文章
|
1月前
|
小程序 JavaScript 前端开发
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)
|
1月前
|
JavaScript 前端开发
javascript中的交互效果
javascript中的交互效果
|
2月前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
2月前
|
Rust 前端开发 JavaScript
Rust与JavaScript的跨语言交互:探索与实践
本文旨在探讨Rust与JavaScript之间的跨语言交互方法。我们将深入了解WebAssembly(Wasm)的角色,以及它如何使得Rust与JavaScript能够在Web应用中和谐共处。此外,我们还将介绍Rust与JavaScript的集成方式,包括Rust编译到Wasm、使用wasm-bindgen进行Rust与JavaScript的绑定,并通过实际案例展示如何实现两者之间的交互。
|
3月前
|
存储 监控 前端开发
JavaScript手册:公司员工电脑监控软件前端交互的代码设计
在当今信息时代,随着公司对员工电脑活动的监控需求不断增加,前端交互的代码设计变得尤为关键。本手册将深入探讨JavaScript编写的公司员工电脑监控软件监控代码,着重介绍如何设计能够在不引起怀疑的情况下,实现对员工电脑活动的细致监控。
230 2
|
4月前
|
存储 JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】8.DLL读写WINCC连接的PLC数据
【傻瓜级JS-DLL-WINCC-PLC交互】8.DLL读写WINCC连接的PLC数据
36 0
【傻瓜级JS-DLL-WINCC-PLC交互】8.DLL读写WINCC连接的PLC数据
|
4月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】7.​C#直连PLC并读取PLC数据
【傻瓜级JS-DLL-WINCC-PLC交互】7.​C#直连PLC并读取PLC数据
84 0
|
4月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】6.​向PLC里面装载数据变量
【傻瓜级JS-DLL-WINCC-PLC交互】6.​向PLC里面装载数据变量
33 0
|
4月前
|
JavaScript C# Windows
【傻瓜级JS-DLL-WINCC-PLC交互】5.​用西门子TIA Portal 博途配置PLC(SIMATIC S7-1200CPU 1215C AC/DC/RLY)
【傻瓜级JS-DLL-WINCC-PLC交互】5.​用西门子TIA Portal 博途配置PLC(SIMATIC S7-1200CPU 1215C AC/DC/RLY)
78 0
|
4月前
|
JavaScript C# Windows
【傻瓜级JS-DLL-WINCC-PLC交互】4.DLL读取WINCC内部变量
【傻瓜级JS-DLL-WINCC-PLC交互】4.DLL读取WINCC内部变量
61 0