IOS ObjectC與javascript互動詳解及實現程式碼

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

IOS OC與js互動詳解

JS注入 : 把JS程式碼有OC注入到網頁

JS注入又叫做OC和JS的互動

OC和JS的互動需要一個橋樑(中介),這個橋樑就是UIWebView的代理方法

網頁載入初始內容


#import "ViewController.h"
@interface ViewController ()<UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
- (void)viewDidLoad {
[super viewDidLoad];
// 設定webView的代理
self.webView.delegate = self;
// 載入網頁資料
NSURL *URL = [NSURL URLWithString:@"http://m.dianping.com/tuan/deal/5501525"];
//  NSURL *URL = [NSURL URLWithString:@"https://www.hao123.com/?tn=93321723_hao_pg"];
NSURLRequest *request = [NSURLRequest requestWithURL:URL];
[self.webView loadRequest:request];
}

在UIWebView的代理方法裡用js來更改原生網頁


/// 網頁載入完成之後呼叫的代理方法 : JS注入 : OC呼叫JS程式碼
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
// 用於拼接JS程式碼的字串
NSMutableString *stringM = [NSMutableString string];
// 拼接移除頂部導航的JS程式碼
[stringM appendString:@"var headerTag = document.getElementsByTagName('header')[0]; headerTag.parentNode.removeChild(headerTag);"];
// 拼接移除橙色按鈕的JS程式碼
[stringM appendString:@"var footerBtnTag = document.getElementsByClassName('footer-btn-fix')[0]; footerBtnTag.parentNode.removeChild(footerBtnTag);"];
// 拼接移除底部佈局的JS程式碼
[stringM appendString:@"var footerTag = document.getElementsByClassName('footer')[0]; footerTag.parentNode.removeChild(footerTag);"];
// 拼接給img標籤新增點選事件的JS程式碼
[stringM appendString:@"var imgTag = document.getElementsByTagName('figure')[0].children[0]; imgTag.onclick = function(){window.location.href='https://www.baidu.com'};"];
// 這個方法就是UIWebView提供的.專門做JS注入的方法
[webView stringByEvaluatingJavaScriptFromString:stringM];
}

攔截原生網路請求網頁跳轉


imgTag.onclick = function(){window.location.href='https://www.baidu.com‘} 

點選imgTag時,主動傳送網路請求

主動傳送網路請求的目的 : 就是為了讓UIWebView能夠攔截到我的自定義的URL

通過自定義的URL,判斷 / 區別 我點選的標籤是否是我設計的那個標籤

自定義獨一無二的URL,表示點選的是獨一無二的標籤

總結起來就是兩步

第一步 : JS注入標籤的點選事件,並主動傳送一個自定義的URL的請求

第二步 : 在UIWebView裡面.攔截自定義的URL的請求,然後判斷請求

JS間接呼叫OC : JS和OC的互動

網頁即將開始載入時呼叫的代理方法 : 可以攔截到webView上的所有的網路請求


- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
// 獲取攔截到的所有的請求
NSString *URLString = request.URL.absoluteString;
//https://m.baidu.com/?from=1015143h
//  NSLog(@"%@",URLString);
if ([URLString isEqualToString:@"https://m.baidu.com/?from=1015143h"]) {
NSLog(@"我點選的是imgTag");
// 當我知道點選的是imgTag時,自動push
//http://www.csdn.net/
NSURL *URL = [NSURL URLWithString:@"http://www.csdn.net/"];
NSURLRequest *request = [NSURLRequest requestWithURL:URL];
[self.webView loadRequest:request];
//    TestViewController *testVC = [[TestViewController alloc] init];
//    [self.navigationController pushViewController:testVC animated:YES];
// 因為這個地址是無效地址.不需要載入的
return NO;
}
// 返回YES的作用 : 表示你攔截到的請求,允許正常的傳送出去;反之,不允許攔截到的請求傳送出去
return YES;
}

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支援!

您可能感興趣的文章:

使用JavaScriptCore實現OC和JS互動詳解

相關文章

IOS開發 最新文章