首先我們要考慮到iOS中OC和JS相互交互的方案：
一、WebView的代理：
在大部分的app中直接使用，可以在WebView的代理方法中，通過攔截的方式與native進行交互，通常是通過攔截url scheme判斷是否是我們需要攔截處理的url及其所對應的要處理的功能是什么。任意版本都支持。
二、JavaScriptCore：
需在iOS7之后就出現了JavaScriptCore.framework來用于和JS進行交互，但是它不支持iOS6，那么對于還需要支持iOS6的APP來說，就可以暫時不用考慮了。
三、WebViewJavascriptBridge：
我們也可以使用WebViewJavascriptBridge開源庫，它的本質也是通過webview的代理攔截scheme，然后再注入相應的JS代碼的。
**UIWebView：
**
**1、OC直接調用JS **
①網頁加載完成時調用的代理方法
②當網頁加載完成之后,通過OC的方法調用JS的代碼,刪除網頁展示時不需要的內容
③OC調用JS的代碼還可以給網頁中的標簽添加點擊事件或者給網頁添加標簽
-(void)webViewDidFinishLoad:(UIWebView *)webView;
④網頁加載完成之后,OC方法調用JS代碼
-(nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
刪除前的圖片：
**—————————————————————————————————————
**
**————————————————————————————————————— **
以下是OC調用JS代碼的具體實現：
[代碼]objc代碼：
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
// JS的代碼
NSMutableString *JSStM = [NSMutableString string];
/**
①找到要刪除的對應的標簽：var headerTag = document.getElementsByTagName('header')[0];
②找到要刪除的標簽對應的父節點：headerTag.parentNode
③從父節點中將要刪除的標簽移除：headerTag.parentNode.removeChild(headerTag);
*/
// 刪除導航
[JSStM appendString:@"var headerTag = document.getElementsByTagName('header')[0];headerTag.parentNode.removeChild(headerTag);"];
// 刪除中間的“立即購買”按鈕
[JSStM appendString:@"var buyTag = document.getElementsByClassName('buy-now')[0];buyTag.parentNode.removeChild(buyTag);"];
// 刪除底部"APP下單返積分抵現金”懸停按鈕
[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);"];
// 給標簽“頂部的圖片”添加點擊事件
/**
①JS中給標簽添加相應的事件：彈框
var figureTag = document.getElementsByTagName('figure')[0].children[0];figureTag.onclick = function(){alert("點我點我點我")};
②通過點擊某個標簽跳轉到其他鏈接：給圖片添加點擊事件
var figureTag = document.getElementsByTagName('figure')[0].children[0];figureTag.onclick = function(){window.location.};
跳轉到百度中的OC調用JS代碼
[JSStM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0];figureTag.onclick = function(){window.location.];
*/
// 通過自定義協議頭的方式來實現控制器間的跳轉，即JS調用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調用JS代碼
[webView stringByEvaluatingJavaScriptFromString:JSStM];
}
**執行以上代碼后，刪掉框框中的內容后的圖片：
**
**
**
**—————————————————————————————————————
**
—————————————————————————————————————
**2、接下來就是JS來調用OC的代碼了：
**
①攔截WebView上的所有的網絡請求 ②JS和OC進行交互的渠道
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType；
③給頂部的圖片添加點擊事件，使標簽可以被點擊，讓其返回到第一個界面
[代碼]objc代碼：
// 通過自定義協議頭的方式來實現控制器間的跳轉，即JS調用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'};"
];
④點擊事件發送網絡請求的目的 : 可以攔截到標簽的點擊事件；自定義協議的目的 : 是為了給事件添加一個特殊的標記,如果攔截到請求,就可以通過這個特殊的標記來區分要做的事情
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest*)requestnavigationType:(UIWebViewNavigationType)navigationType
{NSLog(@"%@",request.URL.absoluteString);
// 拿到網頁上的請求地址
NSString*URLString = request.URL.absoluteString;
// 判斷網頁的請求地址協議是否是我們自定義的那個
NSRange range = [URLString rangeOfString:@"xg://?src="];
// if (range.length > 0) {
if([URLString isEqualToString:@"xg://www.hahah.com"]){
NSLog(@"你點擊的是圖片");
// 控制器的跳轉
[self .navigationController popToRootViewControllerAnimated: YES];
// 攔截到的這個自定義協議的請求時,我是不需要做網頁加載的,就返回NO.
return NO;
/**
溫馨提醒:
①這里點擊標簽之后,如果不需要加載任何的網頁,就需要return NO;
②如果需求是 : 點擊網頁的分享圖標(按鈕),跳轉到分享頁面,業務邏輯跟點擊圖片實現跳轉是一樣的,只需要在網頁中找到那個分享的標簽,確定他的點擊事件并發送一個自定義協議頭的請求,然后攔截這個特殊協議頭的請求即可
*/
}
return YES
;
}
**—————————————————————————————————————
**
—————————————————————————————————————
