首先我們要考慮到iOS中OC和JS相互交互的方案:
一蛾狗、WebView的代理:
在大部分的app中直接使用,可以在WebView的代理方法中搀突,通過(guò)攔截的方式與native進(jìn)行交互乏屯,通常是通過(guò)攔截url scheme判斷是否是我們需要攔截處理的url及其所對(duì)應(yīng)的要處理的功能是什么漾月。任意版本都支持病梢。
二、JavaScriptCore:
需在iOS7之后就出現(xiàn)了JavaScriptCore.framework來(lái)用于和JS進(jìn)行交互,但是它不支持iOS6蜓陌,那么對(duì)于還需要支持iOS6的APP來(lái)說(shuō)觅彰,就可以暫時(shí)不用考慮了。
三钮热、WebViewJavascriptBridge:
我們也可以使用WebViewJavascriptBridge開(kāi)源庫(kù)填抬,它的本質(zhì)也是通過(guò)webview的代理攔截scheme,然后再注入相應(yīng)的JS代碼的隧期。
**UIWebView:
**
**1飒责、OC直接調(diào)用JS **
①網(wǎng)頁(yè)加載完成時(shí)調(diào)用的代理方法
②當(dāng)網(wǎng)頁(yè)加載完成之后,通過(guò)OC的方法調(diào)用JS的代碼,刪除網(wǎng)頁(yè)展示時(shí)不需要的內(nèi)容
③OC調(diào)用JS的代碼還可以給網(wǎng)頁(yè)中的標(biāo)簽添加點(diǎn)擊事件或者給網(wǎng)頁(yè)添加標(biāo)簽
-(void)webViewDidFinishLoad:(UIWebView *)webView;
④網(wǎng)頁(yè)加載完成之后,OC方法調(diào)用JS代碼
-(nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
刪除前的圖片:
**—————————————————————————————————————
**
**————————————————————————————————————— **
以下是OC調(diào)用JS代碼的具體實(shí)現(xiàn):
[代碼]objc代碼:
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
// JS的代碼
NSMutableString *JSStM = [NSMutableString string];
/**
①找到要?jiǎng)h除的對(duì)應(yīng)的標(biāo)簽:var headerTag = document.getElementsByTagName('header')[0];
②找到要?jiǎng)h除的標(biāo)簽對(duì)應(yīng)的父節(jié)點(diǎn):headerTag.parentNode
③從父節(jié)點(diǎn)中將要?jiǎng)h除的標(biāo)簽移除:headerTag.parentNode.removeChild(headerTag);
*/
// 刪除導(dǎo)航
[JSStM appendString:@"var headerTag = document.getElementsByTagName('header')[0];headerTag.parentNode.removeChild(headerTag);"];
// 刪除中間的“立即購(gòu)買”按鈕
[JSStM appendString:@"var buyTag = document.getElementsByClassName('buy-now')[0];buyTag.parentNode.removeChild(buyTag);"];
// 刪除底部"APP下單返積分抵現(xiàn)金”懸停按鈕
[JSStM appendString:@"var footerBtnTag = document.getElementsByClassName('footer-btn-fix')[0]; footerBtnTag.parentNode.removeChild(footerBtnTag);"];
// 刪除底部“各種信息”布局
[JSStM appendString:@"var footerTag = document.getElementsByClassName('footer')[0]; footerTag.parentNode.removeChild(footerTag);"];
// 給標(biāo)簽“頂部的圖片”添加點(diǎn)擊事件
/**
①JS中給標(biāo)簽添加相應(yīng)的事件:彈框
var figureTag = document.getElementsByTagName('figure')[0].children[0];figureTag.onclick = function(){alert("點(diǎn)我點(diǎn)我點(diǎn)我")};
②通過(guò)點(diǎn)擊某個(gè)標(biāo)簽跳轉(zhuǎn)到其他鏈接:給圖片添加點(diǎn)擊事件
var figureTag = document.getElementsByTagName('figure')[0].children[0];figureTag.onclick = function(){window.location.};
跳轉(zhuǎn)到百度中的OC調(diào)用JS代碼
[JSStM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0];figureTag.onclick = function(){window.location.];
*/
// 通過(guò)自定義協(xié)議頭的方式來(lái)實(shí)現(xiàn)控制器間的跳轉(zhuǎn),即JS調(diào)用OC代碼
// [JSStM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'xg://?src= '+this.src};"];
// 也可寫成一下代碼
[JSStM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'xg://www.hahah.com'};"];
// OC調(diào)用JS代碼
[webView stringByEvaluatingJavaScriptFromString:JSStM];
}
**執(zhí)行以上代碼后仆潮,刪掉框框中的內(nèi)容后的圖片:
**
**
**
**—————————————————————————————————————
**
—————————————————————————————————————
**2宏蛉、接下來(lái)就是JS來(lái)調(diào)用OC的代碼了:
**
①攔截WebView上的所有的網(wǎng)絡(luò)請(qǐng)求 ②JS和OC進(jìn)行交互的渠道
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
③給頂部的圖片添加點(diǎn)擊事件性置,使標(biāo)簽可以被點(diǎn)擊檐晕,讓其返回到第一個(gè)界面
[代碼]objc代碼:
// 通過(guò)自定義協(xié)議頭的方式來(lái)實(shí)現(xiàn)控制器間的跳轉(zhuǎn),即JS調(diào)用OC代碼
[JSStM appendString:
@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'xg://?src= '+this.src};"
];
// 也可寫成一下代碼
[JSStM appendString:
@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'xg://www.hahah.com'};"
];
④點(diǎn)擊事件發(fā)送網(wǎng)絡(luò)請(qǐng)求的目的 : 可以攔截到標(biāo)簽的點(diǎn)擊事件蚌讼;自定義協(xié)議的目的 : 是為了給事件添加一個(gè)特殊的標(biāo)記,如果攔截到請(qǐng)求,就可以通過(guò)這個(gè)特殊的標(biāo)記來(lái)區(qū)分要做的事情
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest*)requestnavigationType:(UIWebViewNavigationType)navigationType
{NSLog(@"%@",request.URL.absoluteString);
// 拿到網(wǎng)頁(yè)上的請(qǐng)求地址
NSString*URLString = request.URL.absoluteString;
// 判斷網(wǎng)頁(yè)的請(qǐng)求地址協(xié)議是否是我們自定義的那個(gè)
NSRange range = [URLString rangeOfString:@"xg://?src="];
// if (range.length > 0) {
if([URLString isEqualToString:@"xg://www.hahah.com"]){
NSLog(@"你點(diǎn)擊的是圖片");
// 控制器的跳轉(zhuǎn)
[self .navigationController popToRootViewControllerAnimated: YES];
// 攔截到的這個(gè)自定義協(xié)議的請(qǐng)求時(shí),我是不需要做網(wǎng)頁(yè)加載的,就返回NO.
return NO;
/**
溫馨提醒:
①這里點(diǎn)擊標(biāo)簽之后,如果不需要加載任何的網(wǎng)頁(yè),就需要return NO;
②如果需求是 : 點(diǎn)擊網(wǎng)頁(yè)的分享圖標(biāo)(按鈕),跳轉(zhuǎn)到分享頁(yè)面,業(yè)務(wù)邏輯跟點(diǎn)擊圖片實(shí)現(xiàn)跳轉(zhuǎn)是一樣的,只需要在網(wǎng)頁(yè)中找到那個(gè)分享的標(biāo)簽,確定他的點(diǎn)擊事件并發(fā)送一個(gè)自定義協(xié)議頭的請(qǐng)求,然后攔截這個(gè)特殊協(xié)議頭的請(qǐng)求即可
*/
}
return YES
;
}
**—————————————————————————————————————
**
—————————————————————————————————————