美文网首页
UIWebView与JS交互

UIWebView与JS交互

作者: LLyan | 来源:发表于2017-08-04 16:26 被阅读0次

    webview加载状态:

    a、uninitialized : 还没开始加载

    b、loading : 加载中

    c、loaded : 加载完成

    d、interactive : 结束渲染,用户已经可以与网页进行交互。但内嵌资源还在加载中

    e、complete : 完全加载完成

    WebViewDidFinishLoad 被调用时,readyState 可能处在 interactive 和 complete 两种状态。当我们需要对网页中的元素进行修改时,最好在 complete 状态进行,不然我们的修改可能被重置。

    1、获取当前网页内容:

     [wwjWebViewstringByEvaluatingJavaScriptFromString:@"document.body.innerText"];

    注:需要注意网页渲染完成与加载完成不同时机插入返回的值不同;特别是有js动态改变网页内容,网页渲染完成js不一定就加载完成,所以需注意js的插入时机;

    2、获取当前网页的所有标签:

    [wwjWebViewstringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"];

    3、通过js获取网页的加载完成状

    [wwjWebViewstringByEvaluatingJavaScriptFromString:@"document.readyState"];

    4、插入js函数

    [webViewstringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"

    "script.type = 'text/javascript';"

    "script.text = \"function alertTest(str){"

    "alert(str);"

    "}\";"

    "document.getElementsByTagName('body')[0].appendChild(script);"];

    [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"alertTest('%@');",@"test"]];

    5、通过js隐藏网页标签或元素

    (1)通过document.getElementById('xxx')、document.getElementByTagName('xxx')、document.getElementByClassName('xxx')获取对应标签进行设置

    [webViewstringByEvaluatingJavaScriptFromString:@"document.getElementByClassName('xxx').style.display = 'none';"];

    注:这段js的插入必须是网页回载完成以后,放在webview的代理- (void)webViewDidFinishLoad:(UIWebView*)webView去插入这一句未必有用,因为执行这一代理的时候,webview未必加载完成,若网页还有其他js对需改动的标签进行设置,那么在这里插入就会被覆盖;

    (2)通过设置未被js动态改变的标进行假隐藏

    [webViewstringByEvaluatingJavaScriptFromString:

    @"var tagHead =document.documentElement.firstChild;"

    "var tagStyle = document.createElement(\"style\");"

    "tagStyle.setAttribute(\"type\", \"text/css\");"

    "tagStyle.appendChild(document.createTextNode(\"#header{height: 0pt; visibility:hidden;}\"));"

    "var tagHeadAdd = tagHead.appendChild(tagStyle);"];

    注:这里通过js注入一个方法改标标签的宽、高,并将标签对应的内容隐来达到自己想要的效果;

    相关文章

      网友评论

          本文标题:UIWebView与JS交互

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