Maison >interface Web >js tutoriel >Explication détaillée et code d'implémentation de l'interaction entre javascript et IOS ObjectC

Explication détaillée et code d'implémentation de l'interaction entre javascript et IOS ObjectC

黄舟
黄舟original
2017-03-23 15:00:031907parcourir

Cet article présente principalement l'explication détaillée et le code d'implémentation de l'interaction entre IOS OC et js Les amis dans le besoin peuvent se référer à

Explication détaillée de l'interaction entre IOS. OC et js

Injection JS : injecter du code JS avec OC dans la page Web

L'injection JS est également appelée l'interaction entre OC et JS

L'interaction OC et JS nécessite un pont (intermédiaire), qui est la méthode proxy de UIWebView

La page Web charge le contenu initial

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

Utilisez js dans la méthode proxy de UIWebView pour changer la page Web native

/// 网页加载完成之后调用的代理方法 : JS注入 : OC调用JS代码
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
  // 用于拼接JS代码的字符串
  NSMutableString *stringM = [NSMutableString string];

  // 拼接移除顶部导航的JS代码
  [stringM appendString:@"var headerTag = document.getElementsByTagName(&#39;header&#39;)[0]; 
  headerTag.parentNode.removeChild(headerTag);"];
  // 拼接移除橙色按钮的JS代码
  [stringM appendString:@"var footerBtnTag = document.getElementsByClassName(&#39;footer-btn-fix&#39;)[0]; 
  footerBtnTag.parentNode.removeChild(footerBtnTag);"];
  // 拼接移除底部布局的JS代码
  [stringM appendString:@"var footerTag = document.getElementsByClassName(&#39;footer&#39;)[0]; 
  footerTag.parentNode.removeChild(footerTag);"];
  // 拼接给img标签添加点击事件的JS代码
  [stringM appendString:@"var imgTag = document.getElementsByTagName(&#39;figure&#39;)[0].children[0]; 
  imgTag.onclick = function(){window.location.href=&#39;https://www.baidu.com&#39;};"];

  // 这个方法就是UIWebView提供的.专门做JS注入的方法
  [webView stringByEvaluatingJavaScriptFromString:stringM];
}

Interception du saut de page Web de demande de réseau natif

imgTag.onclick = function(){window.location.href=&#39;https://www.baidu.com‘}

Lorsque vous cliquez sur imgTag, envoyez activement des requêtes réseau

Le but de l'envoi actif de requêtes réseau : est de permettre à UIWebView d'intercepter mon URL personnalisée

Utiliser l'URL personnalisée pour déterminer/distinguer si l'étiquette sur laquelle j'ai cliqué est celle que j'ai conçue

URL personnalisée et unique, indiquant que le clic est un label unique

En résumé, c'est deux étapes

La première étape : JS injecte l'événement de clic de l'étiquette et envoie activement une demande d'URL personnalisée

Étape 2 : Dans UIWebView, interceptez la demande d'URL personnalisée, puis déterminez la demande

JS indirectement appelle OC : interaction JS et OC

La méthode proxy appelée lorsque la page Web est sur le point de commencer à se charger : peut intercepter toutes les requêtes réseau sur la 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;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn