Android中WebView的意义及用法

最新推荐文章于 2022-02-02 13:57:51 发布

艟粼

最新推荐文章于 2022-02-02 13:57:51 发布

阅读量1.5k

点赞数

分类专栏： Android 文章标签： WebView WebSettings addJavascriptInterfa

本文链接：https://blog.csdn.net/talk2soul/article/details/40824929

版权

Android 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

除了手机浏览器用WebView，如今Android APP内嵌网页的情况越来越多，如微信朋友圈文章推送、新闻推送等。HTML5代表未来，在Android手机上也要用WebView来展示。WebView越来越重要，熟练掌握它的用法显得越来越重要。

1、示例演示WebView的用法

1）MainActivity.java

/**
 * 测试WebView的一些用法，设置背景图片，在其上面放置TextView，加载本地及服务器URL，缩放等
 */
public class MainActivity extends Activity {
	private static final String TAG = MainActivity.class.getSimpleName();
	WebView mWebView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//继承AbsoluteLayout->ViewGroup
		//设置背景图片、背景色、local html文件
		mWebView = (WebView) findViewById(R.id.webview);
		//WebView缩放滑动背景图片大小和位置都不变
		mWebView.setBackgroundResource(R.drawable.bottom);
		mWebView.setBackgroundColor(Color.argb(100, 0, 100, 0));
//		mWebView.loadUrl("file:///android_asset/3.1.html");
		mWebView.loadUrl("http://www.baidu.com/");
		mWebView.setWebViewClient(new WebViewClient(){
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				return false;
			}
		});
		WebSettings webSettings = mWebView.getSettings();
		webSettings.setUseWideViewPort(true);
		webSettings.setLoadWithOverviewMode(true);
//		webSettings.setLoadsImagesAutomatically(true);
		//手动缩放网页
		if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){
			webSettings.setDisplayZoomControls(false);//default true
		}
		webSettings.setBuiltInZoomControls(true);
//		webView.setInitialScale(1);	
	}
}

2）activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- WebView上下左右缩放，TextView位置和字体大小都不变 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="紧急通知"
        android:layout_x="100dp"
        android:layout_y="100dp"/>
</WebView>
<!-- <AbsoluteLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tap me"
        android:layout_x="100dp"
        android:layout_y="100dp"/>
</AbsoluteLayout> -->

3）3.1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE2 {
	font-family: "黑体";
	color: #005BAC;
}
.STYLE3 {
	color: #EE7700;
}
-->
</style>
</head>

<body>
<span class="STYLE2">    <span class="STYLE3"><strong>冠心病危险因素：吸烟、高血压、高血脂、糖尿病、肥胖、家族史、年龄、性别。</strong></span></span>
<p class="STYLE2"><span class="STYLE3"><br />
    哪些因素会导致冠心病呢？</span><br />
    一般我们所知的三高人群（高血压，高血脂，高血糖），肥胖，有冠心病家族史，有不良生活习惯如：吸烟、酗酒等人群易发冠心病，同时当季节变化，生气，情绪激动，体力活动增加等也容易诱发冠心病的发作。年龄>40岁的患者易发冠心病。</p>
<p align="right" class="STYLE2"><br />
</p>
</body>
</html>

4) index.html

<html>
	<body>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<p align="right">Well down!I'm proud of you!</p>
		<p align="right">Great job!</p>
		<img src="pic/direction.jpg" align="right"/>
	</body>
</html>

5) direction.jpg

2、用addJavascriptInterface方法来使网页和安卓APP交互

1）写一个网页

<html>
	<head>
		<script type="text/javascript">
			function init(){
				var testVal = document.getElementById('myTextId').value;
				AndroidFunction.showToast(testVal);
			}
		</script>
	</head>
	<body>
		<input type="text" name="myText" id="myTextId"/>
		<input type="button" name="submit" id="btnSubmit" value="submit"
			οnclick="javascript:return init();"/>
	</body>
</html>

2）写一个Activity及其布局文件用于跟网页交互

public class JavaScriptInterfaceActivity extends Activity {
	private WebView webView;
	private TextView textView;
	final Handler handler = new Handler();
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_javascriptinterface);
		webView = (WebView) findViewById(R.id.webview);
		textView = (TextView) findViewById(R.id.textview);
		
		webView.getSettings().setJavaScriptEnabled(true);
		//在html页面点击按钮触发JS函数，在JS函数里调用Java方法
		//从远端网页传值并控制Java代码的执行
		webView.addJavascriptInterface(new Object(){
			public void showToast(final String msg){//调用函数并传参数
				handler.post(new Runnable() {//主线程执行
					@Override
					public void run() {
						textView.setText(msg);
					}
				});
			}
		}, "AndroidFunction");
//		webView.loadUrl("file:///android_asset/index.html");
		webView.loadUrl("http://qinuli.com/web/javascriptinterface.html");
	}
}

3）activity_javascriptinterface.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <WebView 
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <TextView 
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

4）Java代码调用JS函数

定义一个js方法

function setValue(value){
    document.getElementById('myTextId').value = value;
}

Java调用该js方法

webView.loadUrl("javascript:setValue('"+"Well done"+"')");

5) WebView的Cookie机制

登录成功后服务器在请求头返回cookie，cookie包含这次登录的sessionId。接下来的请求仅需将cookie设置到请求头便可通过验证。

WebView是基于webkit内核的UI控件，相当于一个浏览器客户端，它会在本地维护每次会话的cookie。WebView通过CookieManager维护cookie。

1、登录时从服务器的返回头中取出cookie，以HttpURLcollection为例：
String cookieStr = conn.getHeaderField("Set-Cookie");
2、将cookie同步到WebView中
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setCookie(url, cookie);
String newCookie = cookieManager.getCookie(url);