Home > Web Front-end > JS Tutorial > body text

Detailed explanation and implementation code of interaction between javascript and IOS ObjectC

黄舟
Release: 2017-03-23 15:00:03
Original
1750 people have browsed it

This article mainly introduces the detailed explanation of the interaction between IOS OC and js and the relevant information on the implementation code. Friends in need can refer to

Detailed explanation of the interaction between IOS OC and js

JS injection: Inject JS code with OC into the web page

JS injection is also called the interaction between OC and JS

The interaction between OC and JS Interaction requires a bridge (intermediary), which is the proxy method of UIWebView

Loading the initial content of the web page

#import "ViewController.h"

@interface ViewController ()

@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];
}
Copy after login

Use js to change the native web page in the proxy method of UIWebView

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

Interception of native network request webpage jump

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

When clicking imgTag, actively send network requests

The purpose of actively sending network requests: is to allow UIWebView to intercept my customization URL

Use the customized URL to determine/distinguish whether the label I clicked is the label I designed

Customize a unique URL, indicating that the clicked one Unique tag

In summary, it is two steps

The first step: JS injects the click event of the tag and actively sends a custom URL request

Step 2: In UIWebView, intercept the request for the custom URL, and then determine the request

JS indirectly calls OC: Interaction between JS and OC

The proxy method called when the web page is about to start loading: can intercept all network requests on the 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;
}
Copy after login

The above is the detailed content of Detailed explanation and implementation code of interaction between javascript and IOS ObjectC. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!