问题描述:
在安卓开发中,我们经常需要使用到web view这个组件来嵌套网页进行显示,但是有的时候一个简单的webview.loadUrl()并不能满足我们的需求。因为一般的网页都有标题,而这个标题上的返回键并不能真正的返回到我们的安卓端,所以我嘛需要在顶部的标题栏加个返回键并加上网页的标题。
这是web view的加载界面:
webview.loadUrl()后的页面:
去掉标题栏和下面导航后的界面
解决思路:
利用js交互,将webview加载的URL的页面html做一些修改,例如将显示标题的一部分置空.关键点在于找到html中展示标题的节点
那么我们的解决步骤就是:
1.将webview加载的URL在浏览器上打来,鼠标右键单击,查看页面源代码,可以看到页面的布局信息,可以确定我们要删除的标题的代码所在的位置
2.自己定义WebViewClient,去取代系统对webview加载页面的处理,重写WebViewClient的
2.onPageFinished()中编辑javascript函数将显示标题的部分置空或者删除,并调用onPageFinished()方法
3.onPageFinished()中显示被JavaScript处理过的网页数据
查看网页源码:
可以看到需要隐藏的节点就是header和nav这两个节点,所以我们需要在j s代码中找到这两个节点并删除它们即可。
webview的处理
WebView webView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webView.loadUrl("");
webView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//编写 javaScript方法
String javascript = "javascript:function hideOther() {" +
"var headers = document.getElementsByTagName('header');" +
"var lastHeader = headers[headers.length-1];" +
"lastHeader.remove();" +
"var divs = document.getElementsByTagName('nav');" +
"var lastDiv = divs[divs.length-1];" +
"lastDiv.remove();" +
"}";
//创建方法
view.loadUrl(javascript);
//加载方法
view.loadUrl("javascript:hideOther();");
}
});
javascript代码中
getElementsByTagName是根据标签名称获取的,也可以通过getElementByClassName("xxx")获取。但是有的时候,网页上查看页面源代码看到的html内容 和 手机上处理页面内容不太一样,区别就在于网页上带有 Class的标签,在手机上加载时,Class标签就不见了,造成的后果是明明使用getElementByClassName(“”XXX“”).remove()处理过了,但是没有起作用。所以用getElementsByTagName更保险一些。