UIWebView与JS交互
iOS中webView有两种,一种是UIWebView
,在iOS8之前使用,比较笨重、耗内存,另一种是WKWebView
,是iOS8以及以上版本新框架,用于取代UIWebVIew,开发项目如果适配最低版本为8.0以上都应该使用WKWebView,UIWebView和WKWebView都可以和JS进行交互,但是交互实现方式不相同,本文主要讲UIWebView与JS交互
,至于WKWebView
我会另外写一篇文章讲解如何与JS交互。(已写好WKWebView与JS交互)
准备工作:在控制器上添加UIWebView并加载本地HTML文件
override func viewDidLoad() {
super.viewDidLoad()
let web = UIWebView(frame: view.frame)
view.addSubview(web)
web.delegate = self
let path = Bundle.main.path(forResource: "test", ofType: "html")
let url = URL(fileURLWithPath: path!)
let request = URLRequest(url: url)
web.loadRequest(request)
}
遵循UIWebViewDelegate
协议实现代理webViewDidFinishLoad(_ webView: UIWebView)
1.UIWebView调用JS方法
不管是UIWebView调用JS还是JS调用UIWebView都需要先获取JSContext
,所以先引入JavaScriptCore
并定义一个JSContext变量
import JavaScriptCore
var jsContext: JSContext?
然后在webViewDidFinishLoad(_ webView: UIWebView)
中给其赋值
self.jsContext = webView.value(forKeyPath: "documentView.webView.mainFrame.javaScriptContext") as? JSContext
1.1 UIWebView调用JS无参数方法
如果JS中有一个方法叫Swift_JS1
,我们可以这样调用
self.context?.evaluateScript("Swift_JS1()")
1.2 UIWebView调用JS有参数方法
如果JS中有一个方法叫做Swift_JS2
并带有两个参数,我们不用管参数名,也不用管参数类型,可以这样调用:(我传的两个字符串,其他类型也可以传)
self.context?.evaluateScript("Swift_JS2('oc' ,'Swift')")
除了这样传参数,还有一种方式
比如JS中有一个叫swiftAndJS
的方法,参数是要我们传一张图片,我们可以这样调用
let pic = #imageLiteral(resourceName: "icon_buy")
let jsFunc = self.jsContext?.objectForKeyedSubscript("swiftAndJS")
let _ = jsFunc?.call(withArguments: [pic])
2. JS调用Swift方法
js调用UIWebView可以通过注入模型调用。
第一步:
先定义一个协议并遵循JSExport
,我这里给协议取名叫JavaScriptSwiftDelegate
并定义两个方法openCamera()
(无参数)和callWithDict(_ dict: [String: AnyObject])
(有参数),JS可通过这个调用模型方法。实际开发中,js要调用的方法需要在这里面声明,方法名字需要和JS端协商,因为JS调用时需要使用这个名字。
import JavaScriptCore
@objc protocol JavaScriptSwiftDelegate: JSExport{
func openCamera()
func callWithDict(_ dict: [String: AnyObject])
}
第二步:
建立模型,遵循刚才的协议并实现协议方法,我这里建立模型取名JSModelSwift
,JS请求打开相机我就在控制台打印了一下表示调用成功,传参方法将参数打印
@objc class JSModelSwift: NSObject, JavaScriptSwiftDelegate {
weak var jsContex: JSContext?
func openCamera() {
print("JS请求打开相机")
}
func callWithDict(_ dict: [String : AnyObject]) {
print("js调用了方法,参数是: \(dict)")
}
}
第三步:
在func webViewDidFinishLoad(_ webView: UIWebView)
中注入模型,其中SwiftModel
也是需要和JS端协商,JS端调用UIWebView方法时需要使用这个模型名字
//MARK: 注入模型调用
let model = JSModelSwift()
model.jsContex = self.jsContext
//注入模型
//将模型注入jsContext后,js端可以通过SwiftModel调用Swift模型中的方法
self.jsContext?.setObject(model, forKeyedSubscript: "SwiftModel" as NSCopying & NSObjectProtocol)
第四步:
在JS中调用该方法,定义两个按钮,点击按钮后调用打开相机方法和传参方法
<div style="margin-top: 100px">
<input type="button" value="调用系统相机" onclick="SwiftModel.openCamera()">
</div>
<div>
<input type="button" value="调用方法并传参" onclick="SwiftModel.callWithDict({'name': 'testname', 'age': 10, 'height': 170})">
</div>
全部代码如下:
ViewController
import UIKit
import JavaScriptCore
class ViewController: UIViewController, UIWebViewDelegate {
var jsContext: JSContext?
override func viewDidLoad() {
super.viewDidLoad()
let web = UIWebView(frame: view.frame)
view.addSubview(web)
web.delegate = self
let path = Bundle.main.path(forResource: "test", ofType: "html")
let url = URL(fileURLWithPath: path!)
let request = URLRequest(url: url)
web.loadRequest(request)
DispatchQueue.main.asyncAfter(deadline: .now() + 10) {
self.callJSFunc()
}
}
func webViewDidFinishLoad(_ webView: UIWebView) {
self.jsContext = webView.value(forKeyPath: "documentView.webView.mainFrame.javaScriptContext") as? JSContext
//MARK: 注入模型调用
let model = JSModelSwift()
model.jsContex = self.jsContext
//注入模型
//将模型注入jsContext后,js端可以通过SwiftModel调用Swift模型中的方法
self.jsContext?.setObject(model, forKeyedSubscript: "SwiftModel" as NSCopying & NSObjectProtocol)
}
//swift调用js方法
func callJSFunc(){
let pic = #imageLiteral(resourceName: "icon_buy")
let jsFunc = self.jsContext?.objectForKeyedSubscript("swiftAndJS")
let _ = jsFunc?.call(withArguments: [pic])
}
}
JSModelSwift
import UIKit
import JavaScriptCore
@objc protocol JavaScriptSwiftDelegate: JSExport{
func openCamera()
func callWithDict(_ dict: [String: AnyObject])
}
@objc class JSModelSwift: NSObject, JavaScriptSwiftDelegate {
weak var jsContex: JSContext?
func openCamera() {
print("JS请求打开相机")
}
func callWithDict(_ dict: [String : AnyObject]) {
print("js调用了方法,参数是: \(dict)")
}
}
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>首页</title>
</head>
<script type="text/javascript">
function swiftAndJS(pic){
alert("Swift调用了有参数的js方法,参数为" + pic);
}
</script>
<body bgcolor="#dddd">
<!-- 模型注入 -->
<div style="margin-top: 100px">
<input type="button" value="调用系统相机" onclick="SwiftModel.openCamera()">
</div>
<div>
<input type="button" value="调用方法并传参" onclick="SwiftModel.callWithDict({'name': 'testname', 'age': 10, 'height': 170})">
</div>
</body>
</html>