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>
网友评论