美文网首页
WebView与JS交互

WebView与JS交互

作者: Jody526 | 来源:发表于2016-05-13 10:37 被阅读131次

    有时我们会用webView来显示网络上的一些数据,大大减少了我们代码量,只要看好了一个网页我们直接拿来了用就行,但是往往这些网页中有一些是我们所不需要的东西.比如广告了,一些链接啦,大大降低了我们的应用程序的美观 ;
    文章里我用了这个 参考网址

    1.首先用谷歌浏览器打开你需要用的网址 , 然后直接按command+option+l , 或者执行下图的操作打开开发者工具
    开发者工具
    2.然后我们会进入到下图的页面 , 点击做了标记的地方 ,切换设备的模式
    切换成手机模式
    3.接下来页面会变成这样 : 你可以在做了标记的地方选择设备的型号 , 这里我选择了iphone6的
    选择设备类型
    接下来就是最重要的几步了:​
    (1)一开始鼠标在网页上是变成一个黑的圆圈的,这时我们可以执行拖的动作 , 当你想找到你需要的控件时 , 你需要点击刚刚切换设备的按键隔壁的一个箭头标记的按键 , 这时你就可以点击页面上的任意地方来查看他的相应代码
    具体步骤
    (2)当你一点击上图的第二步 , 第三步有一行代码背景就会变成灰色的 , 那一行就是相应的代码 , 紧接着打开控制台Console 输入如下代码 回车

    document.getElementsByClassName('这里写你要消除的空间的class里面的字符串')[0].style.display = 'none'

    比如上图中我们需要删除第二步的控件 , 我们就​可以在console输入

    document.getElementsByClassName('new-art-author')[0].style.display = 'none'

    再按回车 , 神奇的事情发生了 , 控件不见了​
    ...
    这样我们就成功的删除掉不需要的控件了 , 但是这里只是我们验证代码的正确性而已 !!!
    具体操作我们要在代码中执行:
    1.创建webview
      self.webview = [[UIWebView alloc] initWithFrame:self.view.frame];
    

    [self.view addSubview:_webview];

    2.​设置代理
      self.webview.delegate =self;
    
    ​3.发送请求
      [_webview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://app.vmoiver.com/48806?qingapp=app_new&debug=1"]]];​
    
    4.通过webView的代理方法进行我们JS操作:
      -(void)webViewDidFinishLoad:(UIWebView*)webView{
       [_webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByClassName('hot-list m0')[0].style.display = 'none'"];
       [_webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByClassName('item-title fs')[0].style.display = 'none'"];
       [_webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByClassName('new-art-author')[0].style.display = 'none'"];
      }
    

    ------------------------------end-----------------------------

    相关文章

      网友评论

          本文标题:WebView与JS交互

          本文链接:https://www.haomeiwen.com/subject/beoprttx.html