项目中有个页面需要加载被人网站的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布局发生改变,那我这客户端的代码可能就需改变。所以要么服务端很稳定,要么每次改变知会客户端做出改变,或者干脆由服务端定制一个页面。