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

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

}

拦截原生网络请求网页跳转