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

 更新时间:2017年03月02日 16:17:42   投稿:lqh  
这篇文章主要介绍了IOS OC与js交互详解及实现代码的相关资料,需要的朋友可以参考下

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

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

相关文章

  • IOS 缓存文件的清除实现代码

    IOS 缓存文件的清除实现代码

    这篇文章主要介绍了IOS 缓存文件的清除的相关资料,详细说明了如何获取缓存文件,及缓存文件的清除步骤,需要的朋友可以参考下
    2016-10-10
  • IOS 中CALayer绘制图片的实例详解

    IOS 中CALayer绘制图片的实例详解

    这篇文章主要介绍了IOS 中CALayer绘制图片的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • 详解Xcode编译选项功能

    详解Xcode编译选项功能

    本篇文章详细分析了一下Xcode编译选项功能以及相关的介绍,有这方面需要的参考学下下。
    2018-01-01
  • 2016 cocoapods的安装和使用方法以及版本升级遇到的问题

    2016 cocoapods的安装和使用方法以及版本升级遇到的问题

    CocoaPods是一个负责管理iOS项目中第三方开源库的工具,通过CocoaPods,我们可以将第三方的依赖库统一管理起来,配置和更新只需要通过简单的几行命令即可完成,需要的朋友可以参考下
    2016-09-09
  • 详解iOS开发中UITableview cell 顶部空白的多种设置方法

    详解iOS开发中UITableview cell 顶部空白的多种设置方法

    这篇文章主要介绍了详解iOS开发中UITableview cell 顶部空白的多种设置方法的相关资料,需要的朋友可以参考下
    2016-04-04
  • iOS自定义转场动画的几种情况

    iOS自定义转场动画的几种情况

    这篇文章主要给大家介绍了关于iOS自定义转场动画的几种情况,文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • IOS UIImagePickerController从拍照、图库、相册获取图片

    IOS UIImagePickerController从拍照、图库、相册获取图片

    这篇文章主要介绍了IOS UIImagePickerController从拍照、图库、相册获取图片的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • 如何在IOS中使用Cordova插件

    如何在IOS中使用Cordova插件

    这篇文章主要介绍了如何在IOS中使用Cordova插件,包括搭建和使用方法,如果对Cordova感兴趣的同学,可以参考下
    2021-04-04
  • iOS开发教程之识别图片中二维码功能的实现

    iOS开发教程之识别图片中二维码功能的实现

    长按识别二维码这个功能相信对大家来说都不陌生,最近工作中就遇到了这个需求,所以下面这篇文章主要给大家介绍了关于利用iOS识别图片中二维码的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-07-07
  • IOS游戏开发之五子棋OC版

    IOS游戏开发之五子棋OC版

    五子棋是大家比较熟悉的一款小游戏,相信很多人用多种语言写过五子棋小游戏,本文试着用OC实现了一下,在这里给大家分享一下。有需要的可以参考学习。
    2016-08-08

最新评论