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;
}