JS 和OC的交互

Posted 2020-09-19

在程序开发过程中难免会在App中集成一些网页，我们一般也会采用UIWebView直接加载一段URL将需要展示的网页放在App中比如：

    UIWebView *webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = webView;
    NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];

还可以在其属性中获得相应的方法，如监听界面是否加载完毕的

@property (nonatomic, readonly, getter=isLoading) BOOL loading;

还有可以设置网页是否够缩放，是否使用内联的播放器播放视频，是否设置视频自动播放等等的一些属性。详细的可以查阅文档看一下。尤其一些代理方法也是非常实用的。除了UIWebView，ios8.0之后有新增了一类，WKWebView是一个比UIWebView更加方便实用的类，其创建方法如下：

    WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = webView;
    NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];

其使用方式和UIWebView没有太大的区别，多出的是内存消耗变少，实用的接口属性增多

// 这是加载网页最常用的一种方式，通过一个网页URL来加载一个WKWebView，这个URL可以是远程的也可以是本地的，例如我加载百度的主页
- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;

// 根据一个文件,加载一个WKWebView
- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL NS_AVAILABLE(10_11, 9_0);

// 这个方法需要将html文件读取为字符串从而加载为WKWebView，其中baseURL是我们自己设置的一个路径，用于寻找html文件中引用的图片等素材。
- (nullable WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;

// 这个方式使用的比较少，但也更加自由，其中data是文件数据，MIMEType是文件类型，characterEncodingName是编码类型，baseURL是素材资源路径
- (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL NS_AVAILABLE(10_11, 9_0);

这些便是加载一个网页的前提，下面就是一些交互性的内容，之前在抓包内嵌别人的网页的时候总会有广告，为了适应自己的App需要把这些去掉，所以需要利用javascript去操作UIWebView的内容，首先呢，可以先用chrome打开要加载的网页，调整为响应设计模式。此时就需要点中你需要隐藏的控件，此时就能够在控制台看到那串标签，以及他所包含的css代码。这样能获取到他的标签就足够了，接下来就可以使用javascript去操作这个控件。首先在代码的加载完成的时候获取到要隐藏的标签代码如下：

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // 在HTML标签都加载完成后,开始处理HTML标签,调用JS,操作document
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(‘标签的id‘).remove();"];
}

如果那个标签是Class那么定位到标签的方法可以改为：

// 获取标签名是class的
document.getElementsByClassName(‘标签的类名‘)

如果要去掉的标签是在class的内部可以做相应的调整如下：

// 如果需要隐藏的内容在标签类中是一个数组
document.getElementsByClassName(‘adpic‘)[0].style.display = ‘none‘

上面这种方式是先获取到相应的界面，再根据界面中的标签做相应的处理，即通过Native控制JS将网页中的部分隐藏或显示，还可以设置一些js方法写在Native里面，使用Native直接调用JS的方法，不过这要求会写js代码，简单做个实例如下：

// 自定义editMyLogo函数
[webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement(‘script‘);"
     "script.type = ‘text/javascript‘;"
     "script.text = \"function editMyLogo() { "
     "var logo = document.getElementById(‘logo‘);"
     "logo.innerHTML= logo.innerHTML + ‘这是我自己定义的名字‘;"
     "var imglist = logo.getElementsByTagName(‘IMG‘);"
     "for (i=0 ; i < imglist.length ; i++ ){"
     "imglist[i].src = ‘http://pic.to8to.com/attch/day_160218/20160218_d968438a2434b62ba59dH7q5KEzTS6OH.png‘;"
     "}"
     "}\";"
     "document.getElementsByTagName(‘head‘)[0].appendChild(script);"];

    // 执行editMyLogo函数
    [webView stringByEvaluatingJavaScriptFromString:@"editMyLogo();"];