欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-20 21:06:10
ios oc与js交互详解 js注入 : 把js代码有oc注入到网页 js注入又叫做oc和js的交互 oc和js的交互需要一个桥梁(中介),这个桥梁就是u...

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

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

上一篇:

下一篇: