iOS中OC和JS的互調(diào)

首先我們要考慮到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
;
}


**—————————————————————————————————————
**
—————————————————————————————————————

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市个榕,隨后出現(xiàn)的幾起案子篡石,更是在濱河造成了極大的恐慌,老刑警劉巖西采,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凰萨,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡械馆,警方通過(guò)查閱死者的電腦和手機(jī)胖眷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)霹崎,“玉大人珊搀,你說(shuō)我怎么就攤上這事∥补剑” “怎么了境析?”我有些...
    開(kāi)封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)派诬。 經(jīng)常有香客問(wèn)我劳淆,道長(zhǎng),這世上最難降的妖魔是什么默赂? 我笑而不...
    開(kāi)封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任沛鸵,我火速辦了婚禮,結(jié)果婚禮上缆八,老公的妹妹穿的比我還像新娘曲掰。我一直安慰自己疾捍,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布蜈缤。 她就那樣靜靜地躺著拾氓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪底哥。 梳的紋絲不亂的頭發(fā)上咙鞍,一...
    開(kāi)封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音趾徽,去河邊找鬼续滋。 笑死,一個(gè)胖子當(dāng)著我的面吹牛孵奶,可吹牛的內(nèi)容都是我干的疲酌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼了袁,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼朗恳!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起载绿,我...
    開(kāi)封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤粥诫,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后崭庸,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體怀浆,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年怕享,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了执赡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡函筋,死狀恐怖沙合,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情跌帐,我是刑警寧澤灌诅,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站含末,受9級(jí)特大地震影響猜拾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜佣盒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一挎袜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦盯仪、人聲如沸紊搪。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)耀石。三九已至,卻和暖如春爸黄,著一層夾襖步出監(jiān)牢的瞬間滞伟,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工炕贵, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留梆奈,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓称开,卻偏偏與公主長(zhǎng)得像亩钟,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鳖轰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • http://blog.csdn.net/y550918116j/article/details/49619847...
    F麥子閱讀 906評(píng)論 2 0
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,077評(píng)論 25 707
  • 一、簡(jiǎn)介 近兩年隨著HTML5的迅速發(fā)展與日趨成熟睛蛛,越來(lái)越多的移動(dòng)開(kāi)發(fā)者選擇使用HTML5來(lái)進(jìn)行混合開(kāi)發(fā),不僅節(jié)約...
    RainyGY閱讀 1,870評(píng)論 1 12
  • 前言 在iOS開(kāi)發(fā)過(guò)程中胧谈,一般會(huì)有遇到需要和UIWebView交互的需求忆肾,即native端和網(wǎng)頁(yè)端的數(shù)據(jù)交互,因?yàn)?..
    wuwy閱讀 911評(píng)論 0 2
  • ——《不抱怨的世界》讀后感 《不抱怨的世界》是美國(guó)一位心靈導(dǎo)師威爾·鮑溫的作品菱肖,這本書的內(nèi)容如同它的書名一樣...
    輕翼閱讀 273評(píng)論 0 0