iosUIWebView與js的簡單互動swift3版

code_sky發表於2017-09-22
iOSUIWebViewJSSwift

在開發過程中，我們可能遇到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> 

整個過程就是這樣的，這裡貼了原始碼，如果遇到問題歡迎留言，有什麼更好的方法歡迎一起交流。


相關文章