Webview：安卓与JS/html的交互_安卓与webview中的html通信-优快云博客

本文详细介绍Webview在Android应用中的使用技巧，包括自适应屏幕、支持缩放、访问文件、加载本地与外部网页、与JS交互等核心功能，以及如何正确销毁Webview和清除历史记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Webview的一些使用方法
1.打开页面时，自适应屏幕

WebSettings webSettings = mWebView .getSettings();
webSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放
webSettings.setLoadWithOverviewMode(true);

2.支持缩放

WebSettings webSettings = mWebView .getSettings();
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);

3.可以访问文件

WebSettings webSettings = mWebView .getSettings();
webSettings.setAllowFileAccess(true); //设置可以访问文件

五.webview的销毁和清除历史记录

1.清除历史记录

webView.clearHistory();

2.销毁：activity销毁的时候，webview销毁

@Override
protected void onDestroy() {
super.onDestroy();
if(webView!=null){
webView.destroy();
webView=null;}
}

Webview：显示网页
（1）加载本地（assert下面的html）

  webView.loadUrl("file:///android_asset/demo2.html");//加载本地assert下的html页面

（2）加载外地

//：加载外部网页：必须设置setWebViewClient，不然只能通过本地浏览器打开
         webView.loadUrl("http://www.baidu.com");
         webView.setWebViewClient(new WebViewClient(){//将网页加载到自己的webview中
             @Override
             public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                 view.loadUrl("http://www.baidu.com");
                 return true;
             }
         });

安卓调用js:

WebSettings settings = webView.getSettings();
//设置允许访问js
webView.getSettings().setJavaScriptEnabled(true);
//设置允许访问文件
webView.getSettings().setAllowFileAccess(true);

//无参方法
mWebView.loadUrl("JavaScript:text()");
//有参方法
webView.loadUrl("JavaScript:text_arg('来了老弟')");
webView.loadUrl("JavaScript:image_arg('http:\\/\\/www.qubaobei.com\\/ios\\/cf\\/uploadfile\\/132\\/9\\/8289.jpg')");
//加载SD卡中图片
webView.loadUrl("JavaScript:image_arg('file:////sdcard/a.jpg')");

js调用安卓：

    //接口标记
    mWebView.addJavascriptInterface(this,"android");
    
    //必须写的注解
    @JavascriptInterface
    //提供给js的方法
    public void tusi(){
        Toast.makeText(this, "10086", Toast.LENGTH_SHORT).show();
    }
   //js中写的调用代码
   function tusi(){
        //wndow+接口标记+方法名           
    	window.android.tusi();
		}

html:

<!DOCTYPE html>
<html>
	<!--头-->
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//定义方法：修改文字
			function text(){
				//找到text_id控件修改
				document.getElementById("text_id").innerText="哈哈哈哈";
			}
			function text_arg(str){
	
				//找到text_id控件修改
				document.getElementById("text_id").innerText=str;
			}
			
			//定义方法：修改图片
			function image(){
				//找到img_id控件修改
				document.getElementById("img_id").src="img/HBuilder.png";
			}
			function image_arg(img_src){
				//找到img_id控件修改
				document.getElementById("img_id").src=img_src;
			}
			
			//js调用安卓代码
			function tusi(){
				window.android.tusi();
			}
		</script>
	</head>
	<!--身体-->
	<body>
		<p id="text_id">我是文字</p>
		<img id="img_id" width="200" height="200"
			src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562587162663&di=58b961a5726901f5d3b97f8924ddc189&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201811%2F10%2F20181110102045_jwqny.jpg"/>
		<button id="bt1_id" onclick="tusi()">调用安卓代码弹出对话框</button>
		<button id="bt2_id" onclick="text('湖的样真帅')">修改文字</button>
		<button id="bt3_id" onclick="image_arg('img/HBuilder.png')">修改图片</button>
	</body>
</html>