ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptとIOS ObjectC間のやり取りの詳細説明と実装コード

JavaScriptとIOS ObjectC間のやり取りの詳細説明と実装コード

黄舟
黄舟オリジナル
2017-03-23 15:00:031806ブラウズ

この記事では主にIOS OCとjsの間の相互作用の詳細な説明と実装コードを紹介します。必要な友人は

IOS OCとjsの間の相互作用の詳細な説明

JSインジェクションを参照してください。 OCを使用したJSコードをWebページに

JSインジェクションは、OCとJS間の対話とも呼ばれます

OCとJS間の対話にはブリッジ(仲介)が必要です。このブリッジはUIWebViewのプロキシメソッドです

Webページが初期コンテンツをロードします

#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を使用してネイティブWebページを変更します

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

ネイティブネットワークリクエストのWebページジャンプをインターセプト

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

imgTagをクリックすると、ネットワークリクエストを積極的に送信します

アクティブの目的ネットワークリクエストの送信: UIWebView がカスタム URL をインターセプトできるようにするためです

カスタマイズされた URL を使用して、クリックしたラベルが私がデザインしたラベルであるかどうかを判断/区別します

一意の URL をカスタマイズして、クリックされたラベルが一意であることを示します

要約すると、これは 2 つのステップです

最初のステップ: JS がラベルのクリック イベントを挿入し、カスタム URL リクエストをアクティブに送信します

2 番目のステップ: UIWebView でカスタム URL リクエストをインターセプトし、そして、リクエストを決定します

JS間接呼び出しOC: JSとOCの間の対話

Webページがロードを開始しようとしているときに呼び出されるプロキシメソッド: 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;
}

以上がJavaScriptとIOS ObjectC間のやり取りの詳細説明と実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。