IOS ObjectC与javascript交互详解及实现代码

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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！