安卓加载webView只显示部分网页的方法

版权声明:欢迎转载,请注明出处,谢谢! https://blog.csdn.net/benhuo931115/article/details/52180363

安卓加载webView只显示部分网页的方法

如果我们需要用WebView加载一个网页

这里写图片描述

但是又不想让用户看到一些元素,比如这个搜索框

这里写图片描述

这个时候我们就需要在加载url的时候用js代码动态去隐藏这些元素。

具体的做法如下:

  • 1.在浏览器中打开需要加载的网页,鼠标右键,选择检查,找到需要隐藏的元素的div标签的class/id名称,如图

这里写图片描述

  • 2.编写js代码

    //根据class名称获取div数组
    function getClass(parent,sClass)
    {
        var aEle=parent.getElementsByTagName('div');
        var aResult=[];
        var i=0;
        for(i<0; i<aEle.length; i++) {
            if(aEle[i].className==sClass)
            {
                aResult.push(aEle[i]);
            }
        };
        return aResult;
    }
    
    
    //更改特定div的css属性
    function hideOther() 
    {
        getClass(document,'nav-sides')[0].style.display='none';
        getClass(document,'side-bar')[0].style.display='none';
        getClass(document,'area-main')[0].style.display='none';
        getClass(document,'home-foot')[0].style.display='none';
        getClass(document,'enter')[0].style.display='none';
        getClass(document,'crumb')[0].style.display='none';
        getClass(document,'date-tab clearfix')[0].style.display='none';
        document.getElementById('id_sidebar').style.display='none';
        document.getElementById('top_nav').style.display='none';
        document.getElementById('fix-personal').style.display='none';
        document.getElementById('waterlogo').style.display='none';
    
        getClass(document,'wrap')[0].style.minWidth=0;
        getClass(document,'game')[0].style.paddingTop=0;
    }
    
  • 3.加载webView

    webSettings.setJavaScriptEnabled(true);// 设置支持javascript脚本
    
    webview.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                handler.proceed();
            }
    
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
    
                super.onPageStarted(view, url, favicon);
            }
    
            @Override
            public void onPageFinished(WebView view, String url) {
    
                if(url!=null&&url.contains("/hotel/")) {
                    String fun="javascript:function getClass(parent,sClass) { var aEle=parent.getElementsByTagName('div'); var aResult=[]; var i=0; for(i<0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } }; return aResult; } ";
    
                    view.loadUrl(fun);
    
                    String fun2="javascript:function hideOther() {getClass(document,'search-head')[0].style.display='none';getClass(document,'qt-body')[0].style.top=35;}";
    
                    view.loadUrl(fun2);
    
                    view.loadUrl("javascript:hideOther();");
                }
    
                super.onPageFinished(view, url);
            }
    
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.startsWith("http://") || url.startsWith("https://")) {
                    Intent webintent = new Intent(context, ShowResultWebViewActivity.class);
                    webintent.putExtra("url", url);
                    context.startActivity(webintent);
                } else {
                    Log.e("TAG", "url=" + url);
                }
                return true;
            }
        });
    
        webview.loadUrl(url_web);
    

最终效果
这里写图片描述

这里还有一个问题,就是只有在网页加载完后才会执行我们的js代码,隐藏掉我们需要隐藏的元素,解决方法:可以在onPageStarted的时候显示正在加载的动画,加载完后再显示页面

参考:
http://www.zhihu.com/question/41108584/answer/89621912

展开阅读全文

没有更多推荐了,返回首页