很早前就喜欢在Android中使用Webview组件结合JS来做应用,总结了一些不错的小经验,在这里持续更新,自己备忘,也希望给其他需要的同学一些参考~
1.添加权限
要用Webview,确认你在**AndroidManifest.xml** 中添加了使用许可 "android.permission.INTERNET" ,否则会出Web page not available错误。
1 |
<uses-permission android:name="android.permission.INTERNET" />
|
2.开启Javascript支持
如果访问的页面中有Javascript,或者需要通过js和页面交互,则webview必须设置支持Javascript,方法如下:
1 |
webview.getSettings().setJavaScriptEnabled(true);
|
注意:
Using setJavaScriptEnabled can introduce XSS vulnerabilities into you application, review carefully.
可以添加@SuppressLint("SetJavaScriptEnabled")
3.设置可以自动加载图片
1 |
mWebView.getSettings().setLoadsImagesAutomatically(true);
|
4.设置WevView要显示的网页
互联网用:webView.loadUrl("http://www.eoe.cn");
本地文件用:webView.loadUrl(file:///android_asset/eoe.html);固定格式
本地文件存放在:assets文件中
5.处理返回键为返回上一页
如果用webview点链接看了很多页以后,如果不做任何处理,点击系统“Back”键,整个浏览器会调用finish()而结束自身,如果希望浏 览的网页回退而不是退出浏览器,需要在当前Activity中处理并消费掉该Back事件,覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法,代码如下:
1 2 3 4 5 6 7 8 9 |
// To handle the back button key press
public boolean onKeyDown(int keyCode, KeyEvent event) {
LogUtil.i(this, "keyCode=" keyCode);
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
|
6.设置android WebView 不显示滚动条
可以直接在layout中添加 android:scrollbars="none" 来设置不显示滚动条,如下:
1 2 3 4 5 6 |
<WebView
android:id="@ id/wv"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bg"
android:scrollbars="none" />
|
7.重写shouldOverrideUrlLoading时指定url
指定只有url里包含eoe.cn的时候才在webview里打开,否则还是启动浏览器打开.
1 2 3 4 5 6 7 8 9 10 11 12 |
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
LogUtil.i(this, "url=" url);
if ( url.contains("eoe.cn") == true){
view.loadUrl(url);
return true;
}else{
Intent in = new Intent (Intent.ACTION_VIEW , Uri.parse(url));
startActivity(in);
return true;
}
}
|
8.android:scrollbarStyle控制滚动条位置
WebView有一个设置滚动条位置的属性:android:scrollbarStyle 可以是insideOverlay可以是outsideOverlay,两个的区别是SCROLLBARS_INSIDE_OVERLAY的样式是滚动条 在整个page里,类似css中的padding,看代码下的这个图吧,很清晰.
1 2 |
//mWebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
|