webView的常见设置及简单调用

最新推荐文章于 2025-07-31 05:18:33 发布

码码大人

最新推荐文章于 2025-07-31 05:18:33 发布

阅读量667

点赞数

CC 4.0 BY-SA版权

分类专栏：功能文章标签： webview webview设置

本文链接：https://blog.youkuaiyun.com/jinrumorijuesha/article/details/72637108

功能专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍 Android 中 WebView 的配置与使用技巧，包括 JavaScript 交互、页面加载优化及常见问题解决。

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

常见简单设置:

mWebView = (WebView) findViewById(R.id.mWebView);
//设置适应屏幕
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true); //支持JavaScript
//设置适应屏幕
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDisplayZoomControls(false);
//TODO 可以设置先不加载图片,到加载完毕(网页别的数据)就加载图片 可以提升页面加载效率
//webSettings.setLoadsImagesAutomatically(true); //自动加载图片,可以设置网页加载完毕后再加载图片
webSettings.setBlockNetworkImage(true);//设置不加载图片,提高网页响应速度
webSettings.setSupportZoom(false); //设置支持手势缩放
webSettings.setBuiltInZoomControls(false);//设置使用默认的缩放控制器,默认是false
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);//提高渲染页面速度
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  //设置默认缓存
webSettings.setDomStorageEnabled(true);      //设置支持DomStorage
webSettings.setAppCacheMaxSize(1024 * 1024 * 8);   //缓存大小
String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath(); //路径
webSettings.setAppCachePath(appCachePath); //设置缓存路径
webSettings.setAllowFileAccess(true); //设置允许文件接收
webSettings.setAppCacheEnabled(true); //缓存网页    更多设置自行

// 这里主要设置js代码里面Android无法响应的一些事件,必须要监听下自己小处理下

mWebView.setWebChromeClient(new WebChromeClient() {
 @Override
public void onReceivedTitle(WebView view, String title) {
   Log.e("====", "onReceivedTitle: "+title );
                //可以设置你加载的标题
  @Override
 public void onProgressChanged(WebView view, int newProgress) { 
		//监听网页加载进度,可以在这设置网页加载进度条
			if(newProgress>=95){
				webSettings.setBlockNetworkImage(false);//设置开始加载图片,提高网页响应速度,可以先让用户看见页面
                super.onProgressChanged(view, newProgress);
            }

            @Override        //设置响应js 的Alert()函数
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                final AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setNegativeButton(android.R.string.cancel,new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.cancel();  //切记不可自己处理弹框,让js脚本自己处理,自己处理了js没处理会导致网页不可控
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }
            //设置响应js 的Confirm()函数
            @Override
            public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Confirm");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.cancel();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }
//            设置响应js 的Prompt()函数  这里有一些id什么的要自己设置下
            @Override
            public boolean onJsPrompt(WebView view, String url, String message,
 String defaultValue, final JsPromptResult result) {
                final View v = View.inflate(MainActivity.this, R.layout.prompt_dialog, null);
                ((TextView) v.findViewById(R.id.prompt_message_text)).setText(message);
                ((EditText) v.findViewById(R.id.prompt_input_field)).setText(defaultValue);
                AlertDialog.Builder b = new AlertDialog.Builder(TestAlertActivity.this);
                b.setTitle("Prompt");
                b.setView(v);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                       String value = ((EditText) v.findViewById(R.id.prompt_input_field)).getText().toString();
                        result.confirm(value);
                    }
                });
                b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.cancel();
                    }
                });
                b.create().show();
                return true;
            }
        });




//这个是可以监听到webView的加载过程事件
mWebView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {//重写这个方法就可以了,下面这个方法最终还是要走这个方法
        //TODO 应该跳转页面 在自己的webView里面响应js里面的url
        view.loadUrl(url);
        return false;
    }
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {   //24版本之后走这个方法
	//返回false，意味着请求过程里，不管有多少次的跳转请求（即新的请求地址）,均交给webView自己处理，这也是此方法的默认处理
	//返回true，说明你自己处理了,不需要webView处理,你可以做你自己想要实现的功能,如果你要加载js点的网址,必须实现
	//view.loadUrl()方法 需要说明的是view.getUrl是上一次的url,request.getUrl是你点击将要加载的url
	//返回super也就是跳转至手机浏览器，平时写webview一般都在方法里面写 webView.loadUrl(url); 
	// 然后把这个返回值改成下面的false。  但我改了super是没什么作用并没有跳转浏览器,跟false一样,true会跳转浏览器
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {            view.loadUrl(String.valueOf(request.getUrl()));        }        return false
;
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) { //webView开始页面加载
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public void onPageFinished(WebView view, String url) { //webView加载页面完毕
        super.onPageFinished(view, url);
    }

    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {//发生错误
        ToastUtils.showToast("服务器异常");//主要Toast了一下,可以删除
        super.onReceivedError(view, request, error);
    }
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
//这个方法里主要为了兼容有些手机不走上面的同名方法接受不到网页错误
  }
mWebView.loadUrl("https://www.baidu.com");  //加载自己的页面,设置成自己的url


关于js可以调用Android的代码例子:
无参数的:mWebView.addJavascriptInterface(new JavaScriptObject(this,mWebView),"Android"); //这是给js调用的方法:window.Android.uploadPicture();
public class JavaScriptObject {
    Context mContxt;
    WebView webView;
    public JavaScriptObject(Context mContxt, WebView webView) {
        this.mContxt = mContxt;
        this.webView = webView;
    }

    @JavascriptInterface   //sdk17版本以上加上注解
    public void uploadPicture() { 
       //TODO 需要做的事:上传图片
    }
}
有参数的:也是这样用,就是js里面可以接受到一些参数:你只要改下方法里的返回值;  例如:  public booblean uploadPicture(){//自己的代码  return true;}
关于Android调用js里面的方法代码例子:    例如js里面有个全局函数sum(var a,var b);就是里面传两个int值,不知道这样的语法对不对?
如果是没返回值的:  mWebView.loadUrl("javascript:sum(3,8)");  //加载JavaScript中的函数
如果是有返回值的:如果你的兼容最低是19的版本可以直接用这个方法
mWebView.evaluateJavascript("javascript:sum(3,8)", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
	//返回的值在里面  -->value
    }
});
//还可以这样写
webView.addJavascriptInterface(new Object() { //运行在17版本以上的系统上
			@SuppressWarnings("unused")
			@JavascriptInterface
			public void externalUrl(String url) {
				Intent intent = new Intent(Intent.ACTION_VIEW,Uri.parse(url));
				startActivity(intent);
			}
},"Android");

返回按键

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView != null && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

如果你要兼容低版本就不可以用这个方法: 可以在js里面写一个方法调用Android方法把值传过来

对于我们写的方法名都是固定的,如果写错就会调不了,我们还需要把方法名传过去,
这样就不会导致由于方法名的错误调用不了,这个例子还有待补充
常用的webView设置网址
遇到的错误:Unable to preventDefault inside passive event listener due to target being treated as passive
我的解决 webSettings.setDomStorageEnabled(true); //设置支持DomStorage

#html 示例代码

<html>

<head>
<title>我的第一个 HTML 页面</title>
    <script type="text/javascript">
        function javacalljs(){
        
       // window.NativeJsApi.getData()
        var pa = window.NativeJsApi.getData()
             document.getElementById("content").innerHTML +=
                 "<br\>java调用了js函数，无参"+pa;
        }

        <!--这里取到的是 android端传过来的数据-->
        function javacalljswithargs(data){
             document.getElementById("content").innerHTML +=
                 ("<br\>"+data);
        }

    </script>
</head>

<body>
 <br/><br/>
    <li><a onClick="javacalljs()">点击调用html代码并设置数据</a></li>
        <li><a onClick="window.NativeJsApi.startFunction()">点击java无参代码</a></li>
    <!--可以将android端传过来的数据，处理后,放在这里再传给android端-->
    <li><a onClick="window.NativeJsApi.startFunction('我是网页传出来的数据')">点击调用java代码并传递参数</a></li><br/>
    
    <div id="content">内容显示</div>
</body>

</html>

java 示例代码

        var h5 = "<html>\n" +
                "<head>\n" +
                "<title>我的第一个 HTML 页面</title>\n" +
                "    <script type=\"text/javascript\">\n" +
                "        function javacalljs(){\n" +
                "       // window.NativeJsApi.getData()\n" +
                "        var pa = window.NativeJsApi.getData()\n" +
                "             document.getElementById(\"content\").innerHTML +=\n" +
                "                 \"<br\\>java调用了js函数，无参\"+pa;\n" +
                "        }\n" +
                "    </script>\n" +
                "</head>\n" +
                "\n" +
                "<body>\n" +
                " <br/><br/>\n" +
                "    <li><a onClick=\"javacalljs()\">点击调用html代码并设置数据</a></li>\n" +
                "        <li><a onClick=\"window.NativeJsApi.startFunction()\">点击java无参代码</a></li><br/>\n" +
                "<div id=\"content\">内容显示</div>\n" +
                "</body>\n" +
                "</html>"
        webView.addJavascriptInterface(NativeJsApi(toJson), "NativeJsApi")
        //webView.loadUrl(h5)
        webView.loadDataWithBaseURL(null,h5, "text/html",  "utf-8", null);


    private class NativeJsApi {
        @JavascriptInterface
        public void startFunction( String clickUrl ) {
            Log.e("",clickUrl );
        }
           @JavascriptInterface
        public void startFunction() {
            Log.e("","html");
        }
                   @JavascriptInterface
        public String getData() {
            return "android data";
        }
    }