webview展示h5页面时gone掉不想show出来的部分

最新推荐文章于 2022-03-09 11:19:25 发布

猿来是9527

最新推荐文章于 2022-03-09 11:19:25 发布

阅读量1.6k

点赞数 2

分类专栏：实际应用文章标签： html webview android part javascript

本文链接：https://blog.csdn.net/moyinghui/article/details/44238513

版权

实际应用专栏收录该内容

25 篇文章 0 订阅

订阅专栏

项目中有个页面需要加载被人网站的html文件，但产品说html头部有一个导航栏不想展示。我的第一想法是：这个工作应由服务端完成。想必这个也应该是最稳妥的方式了，但产品似乎没有这个念头，于是自己尝试去搞定。

H5页面视觉效果大致是这样的：

获取到url后在浏览器上查看H5页面的部分源码：

<body>
<div class="head">
        <a href="javascript:history.back();" class="prev"></a>
        <h1 class="sub-tit">在线问答</h1>
    </div>
    <div class="questions">
        <dl id="questions-list" class="onlineQ-txt sub-onQ cl">
        </dl>
        </div>
    <div id="comment_textarea" class="textarea">
        <h1>我要提问</h1>
        <form action="http://m.228.cn/ajax/addOnlineReply.json" method="post">
            <input type="hidden" name="productid" value="62730194">
            <textarea id="comment_info" name="info"  cols="30" class="form-text" placeholder="请输入提问内容，最少8个字～"></textarea>
            <input type="hidden" id="save">
        </form>
        <a href="javascript:;" id="ensure" class="form-btn">提交问题</a>
    </div>
</body>

第一个div就是上图绿色区域，我的目标是在webview上”裁减掉“这个div。使用下面方法即可：

mWebView.setWebViewClient(new WebViewClient() {

            @Override
            public void onPageFinished(WebView view, String url) {
                // TODO Auto-generated method stub
                view.loadUrl("javascript:(function() { "
                        + "document.getElementsByTagName('div')[0].style.display='none'; " + "})()");
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

重点是在onPageFinshed方法体里加入的那句代码，这需要对javascript有些许了解。这个方法的视觉效果并不如在服务端修改来的顺眼，因为先加载完页面，出现绿色部分，再“裁减掉”绿色部分,然后剩余部分，即黄色部分会向上挤压直至铺满webview。要我想，是不是可以先把页面代码“撸下来”，自己生成一个h5页面，然后一次性投射到屏幕？这个想法还没有实践。另外，如果服务端的h5布局发生改变，那我这客户端的代码可能就需改变。所以要么服务端很稳定，要么每次改变知会客户端做出改变，或者干脆由服务端定制一个页面。

猿来是9527

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
webview展示h5页面时gone掉不想show出来的部分

项目中有个页面需要加载被人网站的html文件，但产品说html头部有一个导航栏不想展示。我的第一想法是：这个工作应由服务端完成。想必这个也应该是最稳妥的方式了，但产品似乎没有这个念头，于是自己尝试去搞定。H5页面视觉效果大致是这样的：获取到url后在浏览器上查看H5页面的部分
复制链接

扫一扫