IOS ObjectC與javascript交互詳解及實(shí)現(xiàn)代碼

更新時(shí)間：2017年03月02日 16:17:42 投稿：lqh

這篇文章主要介紹了IOS OC與js交互詳解及實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下

IOS OC與js交互詳解

JS注入 : 把JS代碼有OC注入到網(wǎng)頁

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

OC和JS的交互需要一個(gè)橋梁(中介),這個(gè)橋梁就是UIWebView的代理方法

網(wǎng)頁加載初始內(nèi)容

#import "ViewController.h"

@interface ViewController ()<UIWebViewDelegate>

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end
- (void)viewDidLoad {
  [super viewDidLoad];
  // 設(shè)置webView的代理
  self.webView.delegate = self;

  // 加載網(wǎng)頁數(shù)據(jù)
  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來更改原生網(wǎng)頁

/// 網(wǎng)頁加載完成之后調(diào)用的代理方法 : JS注入 : OC調(diào)用JS代碼
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
  // 用于拼接JS代碼的字符串
  NSMutableString *stringM = [NSMutableString string];

  // 拼接移除頂部導(dǎo)航的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標(biāo)簽添加點(diǎn)擊事件的JS代碼
  [stringM appendString:@"var imgTag = document.getElementsByTagName('figure')[0].children[0]; imgTag.onclick = function(){window.location.];

  // 這個(gè)方法就是UIWebView提供的.專門做JS注入的方法
  [webView stringByEvaluatingJavaScriptFromString:stringM];
}

攔截原生網(wǎng)絡(luò)請(qǐng)求網(wǎng)頁跳轉(zhuǎn)

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

點(diǎn)擊imgTag時(shí),主動(dòng)發(fā)送網(wǎng)絡(luò)請(qǐng)求

主動(dòng)發(fā)送網(wǎng)絡(luò)請(qǐng)求的目的 : 就是為了讓UIWebView能夠攔截到我的自定義的URL

通過自定義的URL,判斷 / 區(qū)別我點(diǎn)擊的標(biāo)簽是否是我設(shè)計(jì)的那個(gè)標(biāo)簽

自定義獨(dú)一無二的URL,表示點(diǎn)擊的是獨(dú)一無二的標(biāo)簽

總結(jié)起來就是兩步

第一步 : JS注入標(biāo)簽的點(diǎn)擊事件,并主動(dòng)發(fā)送一個(gè)自定義的URL的請(qǐng)求

第二步 : 在UIWebView里面.攔截自定義的URL的請(qǐng)求,然后判斷請(qǐng)求

JS間接調(diào)用OC : JS和OC的交互

網(wǎng)頁即將開始加載時(shí)調(diào)用的代理方法 : 可以攔截到webView上的所有的網(wǎng)絡(luò)請(qǐng)求

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
  // 獲取攔截到的所有的請(qǐng)求
  NSString *URLString = request.URL.absoluteString;
  //https://m.baidu.com/?from=1015143h
  //  NSLog(@"%@",URLString);

  if ([URLString isEqualToString:@"https://m.baidu.com/?from=1015143h"]) {
    NSLog(@"我點(diǎn)擊的是imgTag");

    // 當(dāng)我知道點(diǎn)擊的是imgTag時(shí),自動(dòng)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];

    // 因?yàn)檫@個(gè)地址是無效地址.不需要加載的
    return NO;
  }

  // 返回YES的作用 : 表示你攔截到的請(qǐng)求,允許正常的發(fā)送出去;反之,不允許攔截到的請(qǐng)求發(fā)送出去
  return YES;
}

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: