iOS中webView有兩種虹菲，一種是UIWebView靠胜，在iOS8之前使用，比較笨重毕源、耗內(nèi)存浪漠，另一種是WKWebView，是iOS8以及以上版本新框架霎褐，用于取代UIWebVIew址愿，開(kāi)發(fā)項(xiàng)目如果適配最低版本為8.0以上都應(yīng)該使用WKWebView，UIWebView和WKWebView都可以和JS進(jìn)行交互冻璃，但是交互實(shí)現(xiàn)方式不相同响谓，本文主要講UIWebView與JS交互，至于WKWebView我會(huì)另外寫(xiě)一篇文章講解如何與JS交互省艳。(已寫(xiě)好WKWebView與JS交互)
準(zhǔn)備工作：在控制器上添加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協(xié)議實(shí)現(xiàn)代理webViewDidFinishLoad(_ webView: UIWebView)
1.UIWebView調(diào)用JS方法
不管是UIWebView調(diào)用JS還是JS調(diào)用UIWebView都需要先獲取JSContext娘纷，所以先引入JavaScriptCore并定義一個(gè)JSContext變量
import JavaScriptCore
var jsContext: JSContext?
然后在webViewDidFinishLoad(_ webView: UIWebView)中給其賦值
self.jsContext = webView.value(forKeyPath: "documentView.webView.mainFrame.javaScriptContext") as? JSContext
1.1 UIWebView調(diào)用JS無(wú)參數(shù)方法
如果JS中有一個(gè)方法叫Swift_JS1，我們可以這樣調(diào)用
self.context?.evaluateScript("Swift_JS1()")
1.2 UIWebView調(diào)用JS有參數(shù)方法
如果JS中有一個(gè)方法叫做Swift_JS2并帶有兩個(gè)參數(shù)跋炕，我們不用管參數(shù)名赖晶，也不用管參數(shù)類型，可以這樣調(diào)用：（我傳的兩個(gè)字符串辐烂，其他類型也可以傳）
self.context?.evaluateScript("Swift_JS2('oc' ,'Swift')")
除了這樣傳參數(shù)遏插，還有一種方式
比如JS中有一個(gè)叫swiftAndJS的方法，參數(shù)是要我們傳一張圖片纠修，我們可以這樣調(diào)用
let pic = #imageLiteral(resourceName: "icon_buy")
let jsFunc = self.jsContext?.objectForKeyedSubscript("swiftAndJS")
let _ = jsFunc?.call(withArguments: [pic])
2. JS調(diào)用Swift方法
js調(diào)用UIWebView可以通過(guò)注入模型調(diào)用胳嘲。
第一步：
先定義一個(gè)協(xié)議并遵循JSExport，我這里給協(xié)議取名叫JavaScriptSwiftDelegate并定義兩個(gè)方法openCamera()(無(wú)參數(shù))和callWithDict(_ dict: [String: AnyObject])（有參數(shù)）,JS可通過(guò)這個(gè)調(diào)用模型方法扣草。實(shí)際開(kāi)發(fā)中胎围，js要調(diào)用的方法需要在這里面聲明，方法名字需要和JS端協(xié)商德召，因?yàn)镴S調(diào)用時(shí)需要使用這個(gè)名字白魂。
import JavaScriptCore
@objc protocol JavaScriptSwiftDelegate: JSExport{
func openCamera()
func callWithDict(_ dict: [String: AnyObject])
}
第二步：
建立模型，遵循剛才的協(xié)議并實(shí)現(xiàn)協(xié)議方法上岗，我這里建立模型取名JSModelSwift福荸，JS請(qǐng)求打開(kāi)相機(jī)我就在控制臺(tái)打印了一下表示調(diào)用成功，傳參方法將參數(shù)打印
@objc class JSModelSwift: NSObject, JavaScriptSwiftDelegate {
weak var jsContex: JSContext?
func openCamera() {
print("JS請(qǐng)求打開(kāi)相機(jī)")
}
func callWithDict(_ dict: [String : AnyObject]) {
print("js調(diào)用了方法肴掷，參數(shù)是: \(dict)")
}
}
第三步：
在func webViewDidFinishLoad(_ webView: UIWebView)中注入模型,其中SwiftModel也是需要和JS端協(xié)商敬锐，JS端調(diào)用UIWebView方法時(shí)需要使用這個(gè)模型名字
//MARK: 注入模型調(diào)用
let model = JSModelSwift()
model.jsContex = self.jsContext
//注入模型
//將模型注入jsContext后背传，js端可以通過(guò)SwiftModel調(diào)用Swift模型中的方法
self.jsContext?.setObject(model, forKeyedSubscript: "SwiftModel" as NSCopying & NSObjectProtocol)
第四步：
在JS中調(diào)用該方法，定義兩個(gè)按鈕台夺，點(diǎn)擊按鈕后調(diào)用打開(kāi)相機(jī)方法和傳參方法
<div style="margin-top: 100px">
<input type="button" value="調(diào)用系統(tǒng)相機(jī)" onclick="SwiftModel.openCamera()">
</div>
<div>
<input type="button" value="調(diào)用方法并傳參" 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: 注入模型調(diào)用
let model = JSModelSwift()
model.jsContex = self.jsContext
//注入模型
//將模型注入jsContext后径玖，js端可以通過(guò)SwiftModel調(diào)用Swift模型中的方法
self.jsContext?.setObject(model, forKeyedSubscript: "SwiftModel" as NSCopying & NSObjectProtocol)
}
//swift調(diào)用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請(qǐng)求打開(kāi)相機(jī)")
}
func callWithDict(_ dict: [String : AnyObject]) {
print("js調(diào)用了方法，參數(shù)是: \(dict)")
}
}
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>首頁(yè)</title>
</head>
<script type="text/javascript">
function swiftAndJS(pic){
alert("Swift調(diào)用了有參數(shù)的js方法,參數(shù)為" + pic);
}
</script>
<body bgcolor="#dddd">
<!-- 模型注入 -->
<div style="margin-top: 100px">
<input type="button" value="調(diào)用系統(tǒng)相機(jī)" onclick="SwiftModel.openCamera()">
</div>
<div>
<input type="button" value="調(diào)用方法并傳參" onclick="SwiftModel.callWithDict({'name': 'testname', 'age': 10, 'height': 170})">
</div>
</body>
</html>
