Web與 OC交互總結

Web與 OC交互總結
1,原生方法,通過url傳值
web代碼:
<script language="javascript">
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 發(fā)起請求后這個iFrame就沒用了，所以把它從dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}

        function shareClick() {

//web傳參數(shù)給iOS,web參數(shù)傳遞通過Url包裹,
loadURL("haleyAction://shareClick?title=測試分享的標題&content=測試分享的內容&url=http://www.baidu.com");
}
</script>
<body>
<input type="button" value="分享" onclick="shareClick()" />
</body>
iOS代碼:

  • (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString *requestString = [[request URL] absoluteString];
    NSLog(@"攔截請求：%@",requestString);
    //requestString
    //前端把數(shù)據(jù)放到requestString中，通過;區(qū)分
    //有時候根據(jù)需要，對url string進行encode和decode
    NSArray *components = [requestString componentsSeparatedByString:@";"];
    //web:getperfectclick 這種協(xié)議定義，ios和android統(tǒng)一
    if([components count]>1 && ([[components objectAtIndex:0] isEqualToString:@"web:getperfectclick"]))
    {
    NSString *element = [components objectAtIndex:1];
    //element轉成字典
    NSDictionary *elementsDic = [element JSONValue];
    NSLog(@"%@",elementsDic);
    //下面根據(jù)字典信息做相應動作
    //獲取參數(shù)后調用OC客戶端邏輯
    //將OC端獲取數(shù)據(jù)返回給web即手動調用web代碼,需要web定義方法,iOS調用
    }
    return YES;
    }
  • (void)setHtmlData:(NSDictionary *)aDic{
    //active.setContentback 這種協(xié)議定義，ios和android統(tǒng)一
    NSString *resultInfo = [NSString stringWithFormat: @"active.setContentback('%@')",[aDic JSONRepresentation]];
    [_webBrowser stringByEvaluatingJavaScriptFromString:resultInfo];
    }

優(yōu)缺點解析
1,原理,規(guī)定協(xié)議,即url的url的字符串iOS和andriod統(tǒng)一,傳參數(shù)一樣,
2,目前了解到iOS和andriod實現(xiàn)互調在web端的代碼不一致
3,web傳參給OC通過url,OC傳參數(shù)web通過調用web定義方法
4,在一套網頁請求客戶端攜帶參數(shù),并在客戶端獲取數(shù)據(jù)后返回給web端,需要客戶端通過url判斷web端請求類型和請求參數(shù), 并且web端定義方法,客戶端在獲取到數(shù)據(jù)后返回給網頁

2,JavaScriptCore
web代碼:
<script language="javascript">
function shareClick() {
//調用OC定義的方法
share('測試分享的標題','測試分享的內容','url=http://www.baidu.com');
}
//這個位置接收OC傳回的參數(shù)
function shareResult(channel_id,share_channel,share_url) {
var content = channel_id+","+share_channel+","+share_url;
asyncAlert(content);
document.getElementById("returnValue").value = content;
}
</script>
<body>
<h1>這是按鈕調用</h1>
<input type="button" value="分享" onclick="shareClick()" />
</body>
iOS代碼:

  • (void)webViewDidFinishLoad:(UIWebView *)webView
    {
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"share"] = ^() {
    NSArray *args = [JSContext currentArguments];
    if (args.count < 3) {
    return ;
    }
    NSString *title = [args[0] toString];
    NSString *content = [args[1] toString];
    NSString *url = [args[2] toString];
    // 在這里執(zhí)行分享的操作

      // 將分享結果返回給js
  NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];

//這個位置將調用js方法,需web定義方法,將參數(shù)返回
[[JSContext currentContext] evaluateScript:jsStr];
};
}

優(yōu)缺點解析
1,獲取documentView.webView.mainFrame.javaScriptContext對象,定義OC方法給js調用, 同時在方法內部調用js定義方法將獲得參數(shù)進行需求處理后獲得數(shù)據(jù)返回
2,在一套網頁請求客戶端攜帶參數(shù),并在客戶端獲取數(shù)據(jù)后返回給web端,需要客戶端定義方法名稱網頁調用,并處理網頁傳的請求參數(shù), 最后web端定義方法,客戶端在獲取到數(shù)據(jù)后返回給網頁

3,WebViewJavascriptBridge框架
web代碼:
<script language="javascript">
//定義初始化方法,固定代碼
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://BRIDGE_LOADED';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
//執(zhí)行初始化
setupWebViewJavascriptBridge(function(bridge) {
//注冊js方法給客戶端調用
bridge.registerHandler('testJSFunction', function(data, responseCallback) {
responseCallback('js執(zhí)行過了');
})
})
function shareClick() {
var params = {'title':'測試分享的標題','content':'測試分享的內容','url':'http://www.baidu.com'};
//調用OC方法, params為js參數(shù)傳遞給OC, response 為OC處理后返回的數(shù)據(jù) WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
alert(response);
document.getElementById("returnValue").value = response;
});
}

<body>
    <h1>這是按鈕調用</h1>
    <input id = 'shareBtn' type="button" value="分享" onclick="shareClick()" />
</body>

iOS代碼:
_webViewBridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
[_webViewBridge setWebViewDelegate:self];
//OC注冊方法給js調用,data為js傳入數(shù)據(jù)
[_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
// data 的類型與 JS中傳的參數(shù)有關
NSDictionary *tempDic = data;
// 在這里執(zhí)行分享的操作
NSString *title = [tempDic objectForKey:@"title"];
NSString *content = [tempDic objectForKey:@"content"];
NSString *url = [tempDic objectForKey:@"url"];

    // 將分享的結果返回到JS中
    NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];

//OC將數(shù)據(jù)返回給網頁端
responseCallback(result);
}];

優(yōu)缺點解析
1, 能實現(xiàn)同時接收網頁端數(shù)據(jù),并做自己的邏輯處理后返回數(shù)據(jù)給網頁端,網頁端拿到數(shù)據(jù)后進行自己的邏輯處理
2,除了固定初始化代碼外,此框架能同時實現(xiàn)雙向傳值,并在接受到數(shù)據(jù)后進行自己的邏輯處理 ,不用web端單獨定義方法給OC調用來把OC獲取的數(shù)據(jù)傳遞給網頁

4,JavaScriptCore框架iOS封裝后
web代碼:
function test1() {
var params = {"name":"你","val":"真棒!"};
/*
參數(shù)1: 給OC數(shù)據(jù)
參數(shù)2: OC回調給我們的數(shù)據(jù)
*/
//調用oc代碼
mytest(params,function(data) {
alert(data["name2"]);
alert(data["val2"]);
});

    }
    
    </script>
</head>
<body id="b1">
    <div onclick="test1()" id="a1">aaa</div>
</body>

iOS代碼:

  • (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    return ![self.webView dispatchURL:request.URL];
    }

  • (NSDictionary *)mytest:(NSDictionary *)params {

    NSLog(@"params:%@,%@",params[@"name"],params[@"val"]);
    return @{@"name2":@"你",@"val2":@"很棒"};
    }

  • (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 讓js方法和OC方法進行橋接
    [webView registerJSMethod:@"mytest" target:self method:@selector(mytest:)];
    }

//框架內部實現(xiàn)部分方法

pragma mark - 注冊url進行調用OC和js -

  • (BOOL)dispatchURL:(NSURL *)url {
    if([url.scheme isEqualToString:kBridgeScheme]) {
    NSString *jsMethod = url.host;
    NSDictionary *invokeParams = [url.query params][@"params"];
    NSInvocation *invocation = [[self registeredMethods] objectForKey:jsMethod];
    [invocation setArgument:&invokeParams atIndex:2];
    __autoreleasing NSDictionary *result = nil;
    [invocation invoke];
    [invocation getReturnValue:&result];
    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:result options:NSJSONWritingPrettyPrinted error:nil];
    if(jsonData) {
    NSString *jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
    NSString *js = [NSString stringWithFormat:@"CallbackCaches"%@"",jsMethod,[jsonString stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]]];
    [self stringByEvaluatingJavaScriptFromString:js];
    }
    [self stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"CallbackMap["%@"]=NULL;",jsMethod]];
    return YES;
    }
    return NO;
    }

pragma mark - 注冊方法 -

  • (void)registerJSMethod:(NSString *)jsMethod target:(id)target method:(SEL)method {
    //緩存方法
    NSMethodSignature *signature = [[target class] instanceMethodSignatureForSelector:method];
    NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:signature];

    invocation.target = target;
    invocation.selector = method;

    NSMutableDictionary *registeredMethods = self.registeredMethods;
    [registeredMethods setObject:invocation forKey:jsMethod];

    //設置回調函數(shù)緩存
    if(![self isJSVariable:@"CallbackCaches"]) {
    [self stringByEvaluatingJavaScriptFromString:@"var CallbackCaches = new Object();"];
    }

    //運行時植入js代碼，使js擁有js回調能力
    if(![self isJSFunction:jsMethod]) {
    NSString *js = [NSString stringWithFormat:@"%@ = function(params,callback){CallbackCaches["%@"]=callback;window.location.href="%@://%@?params="+encodeURIComponent(JSON.stringify(params));}",jsMethod,jsMethod,kBridgeScheme,jsMethod];
    [self stringByEvaluatingJavaScriptFromString:js];
    }

}

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 隨著H5技術的興起，在iOS開發(fā)過程中，難免會遇到原生應用需要和H5頁面交互的問題。其中會涉及方法調用及參數(shù)傳值等...
    Chris_js閱讀 3,120評論 1贊 8
  • 前言 在iOS開發(fā)過程中，一般會有遇到需要和UIWebView交互的需求，即native端和網頁端的數(shù)據(jù)交互，因為...
    wuwy閱讀 933評論 0贊 2
  • JSBridge 1. Why do we need JSBridge? 2. Why is “JS”Bridge...
    loveqin閱讀 9,245評論 0贊 7
  • iOS下JS與OC互相調用（一）--UIWebView 攔截URL 最近準備把之前用UIWebView實現(xiàn)的JS與...
    VD2012閱讀 556評論 0贊 1
  • 有你們的時光是最美的風景，原來遇見你們才是我最大的幸運，高中是人生最美的時光，很幸運能在這里和你們相遇，相識，相...
    jiancc閱讀 275評論 0贊 0