iOS 常用的WebView與js的交互

常用的js與OC的交互方式:

1、js給OC傳值方式一(使用JavaScriptCore.framework框架,實現(xiàn)UIWebViewDelegate代理協(xié)議)

代碼實現(xiàn)如下:


-(void)webViewDidFinishLoad:(UIWebView *)webView{

JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

context[@"btnClick"] = ^{

NSArray *values = [JSContext currentArguments];

for (id obj in values) {

NSLog(@"%@", obj);

}

};

}

//其中btnClick是js的函數(shù)名,values數(shù)組是js函數(shù)的參數(shù),也就是js要給OC傳的值

  1. js給OC傳值方法二(使用自定義URL方式)
    代碼如下:
function btnClick()
{
var str1=document.getElementById("text1").value;
var str2=document.getElementById("text2").value;
//  "objc://"為自定義協(xié)議頭;
//  str1&str2為要傳給OC的值,以":/"作為分隔
window.location.href="objc://"+":/"+str1+":/"+str2;
}

其中objc:為自定義的協(xié)議頭,str1和str2是js要傳給OC的值,用“:/”分隔;
在OC中UIWebView的代理方法shouldStartLoadWithRequest:navigationType:中拿到此URL,根據(jù)objc:協(xié)議頭去找到傳過來的參數(shù)
代碼如下:
//遵守UIWebViewDelegate代理協(xié)議。

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
//拿到網(wǎng)頁的實時url
NSString *requestStr = [[request.URL absoluteString] stringByRemovingPercentEncoding];
//在url中尋找自定義協(xié)議頭"objc://"
if ([requestStr hasPrefix:@"objc://"]) {
// 以"://"為中心將url分割成兩部分,放進數(shù)組arr
NSArray *arr = [requestStr componentsSeparatedByString:@"://"];
NSLog(@"%@",arr);
//取其后半段
NSString *paramStr = arr[1];
NSLog(@"%@",paramStr);
//以":/"為標(biāo)識將后半段url分割成若干部分,放進數(shù)組arr2,此時arr2[0]為空,arr2[1]為第一個傳參值,arr2[2]為第二個傳參值,以此類推
NSArray *arr2 = [paramStr componentsSeparatedByString:@":/"];
NSLog(@"%@",arr2);
//取出參數(shù),進行使用
if (arr2.count) {
NSLog(@"有參數(shù)");
NSString *str1 = arr2[1];
NSString *str2 = arr2[2];
}else{
NSLog(@"無參數(shù)");
}
return NO;
}
return YES;
}

//具體解釋代碼中已經(jīng)注釋
1、OC與js交互

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 20px">
<h2>JS與OC交互</h2>
<input type="button" value="喚起本地方法(call)" onclick="tianbai.call()">
</div>
<div>
<input type="button" value="喚起getCall:(NSString *)callString傳值" onclick="call()">
</div>
<script>    
var call = function()
{
    var callInfo = JSON.stringify({"jianshu": "http://www.itdecent.cn/users/55c8fdc3c6e7/latest_articles"});
    //js調(diào)用了OC的getCall方法
        tianbai.getCall(callInfo);
}
var Callback = function(str)
{
    alert(str);
}
var alerCallback = function()
{
    alert('成功');
}
</script>
</body>
</html>

上面html的代碼:建立了兩個button
第一個button綁定了 tianbai.call() 方法,這里 tianbai 是一個對象,這個對象的作用下面OC代碼中會說明, tianbai.call() 代表 tianbai 對象調(diào)用 call() 方法
第二個button綁定了 call() 的方法,調(diào)用的是下面JavaScript中的 call() 方法,在 JavaScript 的 call() 里面,定義一個 callInfo 參數(shù),方法中 tianbai.getCall(callInfo) 代表 tianbai 對象調(diào)用 getCall 方法并傳參數(shù) callInfo ,下面兩個方法是OC調(diào)用JavaScript方法,其中Callback傳回str,alerCallback為OC僅調(diào)用JavaScript方法!

OC代碼

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //將self賦給js中得tianbai對象,tianbai對象調(diào)用的js的call方法,這樣self就可以調(diào)用js的call方法
    self.jsContext[@"tianbai"] = self;
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"異常信息:%@", exceptionValue);
    };

}
//js中也有call方法
- (void)call{
    NSLog(@"call");
    // 之后在回調(diào)js的方法Callback把內(nèi)容傳出去
    JSValue *Callback = self.jsContext[@"Callback"];
    //傳值給web端,js的alert會彈出提示框
    [Callback callWithArguments:@[@"喚起本地OC回調(diào)完成"]];
}
- (void)getCall:(NSString *)callString{
    NSLog(@"Get:%@", callString);
    // 成功回調(diào)js的方法Callback
    JSValue *Callback = self.jsContext[@"alerCallback"];
    [Callback callWithArguments:nil];
    
//    直接添加提示框
//    NSString *str = @"alert('OC添加JS提示成功')";
//    [self.jsContext evaluateScript:str];

}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容