iOS开发：UIWebView OC与JS交互教程，JS注入与自定义URL拦截

UIWebView OC与JS交互原理

在iOS开发中，Objective-C与JavaScript之间的交互是一个常见需求。

JS注入是指由Objective-C端将JavaScript代码注入到加载的网页中。

这种交互方式通常被称为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];
}

JS注入实现网页修改

在UIWebView的代理方法中，可以使用JavaScript来修改原生网页的结构或样式。


/// 网页加载完成之后调用的代理方法 : 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];
}

自定义URL拦截与原生跳转

另一种常见的交互方式是拦截原生的网络请求，从而实现网页跳转的控制。


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

例如，当用户点击特定的imgTag标签时，可以主动触发一个网络请求。

主动发送网络请求的主要目的是为了让UIWebView能够拦截到该自定义的URL。

通过解析自定义的URL，可以判断或区分用户点击的是否为预设的设计标签。

为了精确识别，可以定义独一无二的URL来标识特定的点击标签。

总结来说，这一过程主要包含两个关键步骤。

第一步是注入JS代码以监听标签的点击事件，并主动发送一个包含自定义参数的URL请求。

第二步是在UIWebView的代理方法中拦截该自定义URL请求，并根据请求内容执行相应的原生逻辑。

这种机制实现了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 UIWebView中OC与JavaScript交互详解：JS注入与URL拦截实现

UIWebView OC与JS交互原理

JS注入实现网页修改

自定义URL拦截与原生跳转

实用工具推荐