WebView网页加载器详解

最新推荐文章于 2023-12-18 15:40:07 发布
最新推荐文章于 2023-12-18 15:40:07 发布
阅读量497 收藏 1
点赞数
分类专栏： # androd基础控件 文章标签： webview js webViewClient 属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyw0101/article/details/83716868
版权

现在混合开发越来越火热，WebView的使用也是越来越频繁，今天详细介绍一下webview的常用属性和方法，以及开发时遇到的坑

使用

xml中定义

<WebView
        android:id="@+id/main_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layerType="software"
        android:fadingEdge="none"
        android:fadingEdgeLength="0dp"
        android:scrollbars="none"/>

android:layerType="software"硬件加速 layerType与WebView白屏
android:fadingEdge="none"设置拉滚动条时 ，边框渐变的放向。none（边框颜色不变），horizontal（水平方向颜色变淡），vertical（垂直方向颜色变淡）。
android:fadingEdgeLength="0dp"用来设置边框渐变的长度
android:scrollbars="none"去掉webview的滚动条

加载html的四种方式

  • 网络url
    webView.loadUrl("https://blog.csdn.net/zyw0101");
    （注：如果页面加载后自动跳转默认浏览器，则需要webView.setWebViewClient(new WebViewClient());，下面会详细介绍）
  • assets文件下的html
    webView.loadUrl("file:///android_asset/my.html");
  • sd卡中的html
    webView.loadUrl("file:///" + Environment.getExternalStorageDirectory() + "/my.html");
    （注：访问本地文件需要设置setAllowFileAccess为true，同时开启读取权限）
  • 直接显示html代码
    webView.loadDataWithBaseURL(null, "<!DOCTYPE html>\n" + "<html>\n" + "<head>\n" + "\t<title>测试网页</title>\n" + "</head>\n" + "<body>\n" + "<p>直接显示html代码</p>\n" + "</body>\n" + "</html>", "text/html", "utf-8", null);

WebSetting常用设置

        WebSettings webSettings = webView.getSettings();
        webSettings.setDomStorageEnabled(true);// 开启 DOM storage API 功能
        webSettings.setLoadWithOverviewMode(true); // 当页面宽度大于WebView宽度时，缩小使页面宽度等于WebView宽度
        webSettings.setUseWideViewPort(true);// 页面通过`<meta name="viewport" ... />`自适应手机屏幕
        webSettings.setJavaScriptEnabled(true);// 支持JS
        webSettings.setAllowContentAccess(true);// 是否可访问Content Provider的资源，默认值 true
        webSettings.setAllowFileAccess(true);// 是否可访问本地文件 如：读取sd卡的html文件
        webSettings.setAllowFileAccessFromFileURLs(false);// 是否允许通过file url加载的Javascript读取本地文件，默认值 false
        webSettings.setAllowUniversalAccessFromFileURLs(false);// 是否允许通过file url加载的Javascript读取全部资源(包括文件,http,https)，默认值 false
        webSettings.setSupportZoom(true);// 支持屏幕缩放
        webSettings.setBuiltInZoomControls(true);// 支持屏幕缩放
        webSettings.setDisplayZoomControls(false);// 显示隐藏缩放按钮
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);// 缓存方式

不常用

// 定位(location)
settings.setGeolocationEnabled(true);

// 是否保存表单数据
settings.setSaveFormData(true);

// 是否当webview调用requestFocus时为页面的某个元素设置焦点，默认值 true
settings.setNeedInitialFocus(true);  

// 布局算法
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

// 是否支持多窗口，默认值false
settings.setSupportMultipleWindows(false);

// 是否可用Javascript(window.open)允许弹窗，默认值 false
settings.setJavaScriptCanOpenWindowsAutomatically(false);

// 资源加载
settings.setLoadsImagesAutomatically(true); // 是否自动加载图片
settings.setBlockNetworkImage(false);       // 禁止加载网络图片
settings.setBlockNetworkLoads(false);       // 禁止加载所有网络资源

// 默认文本编码，默认值 "UTF-8"
settings.setDefaultTextEncodingName("UTF-8");
settings.setDefaultFontSize(16);        // 默认文字尺寸，默认值16，取值范围1-72
settings.setDefaultFixedFontSize(16);   // 默认等宽字体尺寸，默认值16
settings.setMinimumFontSize(8);         // 最小文字尺寸，默认值 8
settings.setMinimumLogicalFontSize(8);  // 最小文字逻辑尺寸，默认值 8
settings.setTextZoom(100);              // 文字缩放百分比，默认值 100

// 字体
settings.setStandardFontFamily("sans-serif");   // 标准字体，默认值 "sans-serif"
settings.setSerifFontFamily("serif");           // 衬线字体，默认值 "serif"
settings.setSansSerifFontFamily("sans-serif");  // 无衬线字体，默认值 "sans-serif"
settings.setFixedFontFamily("monospace");       // 等宽字体，默认值 "monospace"
settings.setCursiveFontFamily("cursive");       // 手写体(草书)，默认值 "cursive"
settings.setFantasyFontFamily("fantasy");       // 幻想体，默认值 "fantasy"

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    // 用户是否需要通过手势播放媒体(不会自动播放)，默认值 true
    settings.setMediaPlaybackRequiresUserGesture(true);
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // 5.0以上允许加载http和https混合的页面(5.0以下默认允许，5.0+默认禁止)
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    // 是否在离开屏幕时光栅化(会增加内存消耗)，默认值 false
    settings.setOffscreenPreRaster(false);
}

if (isNetworkConnected(context)) {
    // 根据cache-control决定是否从网络上取数据
    settings.setCacheMode(WebSettings.LOAD_DEFAULT);
} else {
    // 没网，离线加载，优先加载缓存(即使已经过期)
    settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}

// 提高渲染的优先级
settings.setRenderPriority(WebSettings.RenderPriority.HIGH);

WebView的常用方法

  • WebViewClient

  • 主要帮助WebView处理各种通知、请求事件的，有以下常用方法：

    • onPageFinished 页面请求完成
    • onPageStarted 页面开始加载
    • shouldOverrideUrlLoading 拦截url
    • onReceivedError 访问错误时回调，例如访问网页时报错404，在这个方法回调的时候可以加载错误页面。
webView.setWebViewClient(new WebViewClient(){
            // 拦截url
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                // 拦截页面加载，返回true表示宿主app拦截并处理了该url，否则返回false由当前WebView处理
                // 该方法可以防止跳转默认浏览器
                return super.shouldOverrideUrlLoading(view, request);
            }
            // 页面开始加载
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                Log.e(TAG, "onPageStarted");
                progressBar.setVisibility(View.VISIBLE);
            }

            // 页面加载完成
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Log.e(TAG, "onPageFinished");
                progressBar.setVisibility(View.GONE);
            }
            // 访问错误时回调，例如访问网页时报错404，在这个方法回调的时候可以加载错误页面。
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                Log.e(TAG, "onReceivedError");
            }
        });

  • WebChromeClient

  • 主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等，有以下常用方法。
    • onJsAlert webview 不支持js的alert弹窗，需要自己监听然后通过dialog弹窗
    • onReceivedTitle 获取网页标题
    • onReceivedIcon 获取网页icon
    • onProgressChanged 加载进度回调
webView.setWebChromeClient(new WebChromeClient(){
            // alert弹窗如果不能弹出 需要创建一个WebChromeClient
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                AlertDialog.Builder localBuilder = new AlertDialog.Builder(webView.getContext());
                localBuilder.setMessage(message).setPositiveButton("确定",null);
                localBuilder.setCancelable(false);
                localBuilder.create().show();

                //注意:
                //必须要这一句代码:result.confirm()表示:
                //处理结果为确定状态同时唤醒WebCore线程
                //否则不能继续点击按钮
                result.confirm();
                return true;
//                return super.onJsAlert(view, url, message, result);
            }

            @Override
            public void onReceivedIcon(WebView view, Bitmap icon) {
                super.onReceivedIcon(view, icon);

            }

            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                Log.e(TAG, "onReceivedTitle = " + title);
            }

            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                progressBar.setProgress(newProgress);
            }
        });

  • canGoBack和goBack

判断有没有上一页和返回上一页

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // 点击返回按钮
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            // 判断有没有上一页
            if (webView.canGoBack()) {
                // 返回webView的上一个页面
                webView.goBack();
            } else {
                finish();
            }
        }
        return super.onKeyDown(keyCode, event);
    }

Android和JS相互调用

  • Android调用js方法

js代码

<script type="text/javascript">
		function showAlert(){
		  alert("欢迎调用js方法");
		}

		function addText(){
		  var x = document.getElementById("my_text");
		  x.innerHTML = "调用了js方法addText";
		}

	</script>

Android代码

webView.loadUrl("javascript:addText()");

其中addText()就是js中定义的方法，当android当前版本大于等于19时，可以使用最新方法调用

webView.evaluateJavascript("javascript:addText()", new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String value) {
                            // 回调
                            Log.e(TAG, "onReceiveValue = " + value);
                        }
                    });

多了一个回调方法
两个方法的区别：通过loadUrl调用没有返回值且会刷新页面，但对版本没有要求，evaluateJavascript效果比较高有返回值且不会刷新页面，但需要4.4及以上才能使用，所以开发时需要配合使用

int version = Build.VERSION.SDK_INT;
                if (version < 19) {

                    webView.loadUrl("javascript:addText()");
                } else {
                    webView.evaluateJavascript("javascript:addText()", new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String value) {
                            // 回调
                            Log.e(TAG, "onReceiveValue = " + value);
                        }
                    });
                }

这里需要注意的是 如果js方法里执行的是alert()，那么需要在android中设置

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗

  • js调用Android方法

Android代码
1.直接定义方法

webView.addJavascriptInterface(this, "android");// js调用android方法
@JavascriptInterface
    public void showAndroid(){
        tv.setText("js调用了android方法");
    }

2.新建类

webView.addJavascriptInterface(new Myjs(), "test");// js调用android方法
public class Myjs{
        @JavascriptInterface
        public void showToast(){
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    tv.setText("js调用了android方法");
                }
            });

        }
    }

js代码

<input type="button" name="btn" value="js调用android" onclick="android.showAndroid()">

FAQ

  1. 为什么android调用js方法后，html不能弹窗
    答：是否使用了alert()，如果是，是否设置了
    webSettings.setJavaScriptEnabled(true);
    webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
    webView.setWebChromeClient(new WebChromeClient());

  2. 加载本地html文件不成功
    答：是否设置了webSettings.setAllowFileAccess(true);，是否开启了本地访问本地文件的读写权限，6.0以后需要动态申请

  3. 加载在线网页或者点击网页跳转时打开了android默认浏览器
    答：是否设置了webView.setWebViewClient(new WebViewClient());

  4. android调用js时多个参数如何传递
    答: webView.loadUrl("javascript:addText(" + "'" + param1+ "'" + "," + "'" + param2 + "'" + ")"); 需要将参数放到单引号中

参考

Android：你要的WebView与 JS 交互方式 都在这里了
Android WebView基本使用
Android：你不知道的 WebView 使用漏洞

孤独的冥王星
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android WebView离线缓存 WebViewAssetLoader 的使用
xq610928的博客
04-26 1709
前言 ： 各位同学大家好，最近很长时间没有更新文章了。因为搬到新家去了 所以留给自己的时间非常的少，今天因为在项目开发上面遇到一些问题 所以就想记录分享出来。 问题原因 是这样的，项目组这边做了一个安卓WebView 嵌套H5链接的游戏壳包 。相信很多同学做过类似的需求 很多同学会说这个很简单 初始化webview控件 然后 设置webviewsetting 即可 最后调用 xWalkView.loadUrl(url); 方法即可 因为我们加载的一个H5游戏 在初始化加载进度条的时候有一个下载动作 非
WebView加载百度网页
qq_39937301的博客
10-18 3941
效果图： 记的在清单文件里添加权限：uses-permissionandroid:name="android.permission.INTERNET" /> 代码如下： public class MainActivity extends AppCompatActivity { private Button dian; private WebView webView;
Android与JS交互详解
u013773608的博客
03-01 5622
先来说说什么是JS交互：说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码，也可以通过JS来调用项目中的代码。
Android WebView浏览器组件 用WebView实现加载网页
xqiuqiu_的博客
05-10 2230
什么是WebView WebView是Android中UI组件的一种 WebView基于Webkit内核（Chromium） WebView的用处 WebView可以用来展示网页，并且与网页进行交互 加载网页的四种方式 loadUrl(String url) loadUrl(Strig url,Map<String,String> additionalHttpHeaders) loadData(String data,String mimeType,String encoding)
使用WebView控件来实现外部网页的加载
qq_46258465的博客
12-04 2648
使用WebView控件来实现页面的加载 1. 修改配置文件 首先我们需要修改配置文件使其拥有修改权限 AndroidMainfest.xml 加载百度页面 在我们的配置文件中加载这一句： <!-- 因为要使用webview所以我增加了他的访问权限--> <uses-permission android:name="android.permission.INTERNET" /> 像这样 2. 样式部分 然后为我们的webview写入到组件样式部分 activity—m
Android Native APP开发笔记：使用WebView控件加载网页
Naisu的各种笔记
10-17 4476
WebView是一个比较常用的控件，功能上也比较单一，就是用来加载网页的，可以加载远程的网页，也可以加载本地网页文件。简单来说就相当于一个浏览器。这篇文章将对WebView使用相关内容做个简单记录。
WebView加载网页代码
qq_34822188的博客
09-12 405
1、loadUrl(String url);直接加载网页、图片并显示    本地资源： mWebview.loadUrl("file:///android_asset/x.html");    远程资源： mWebview.loadUrl(“http://www.baidu.com"); 2、loadData (data, mimeType, encoding):   
Android studio点击跳转WebView详解
08-29
5. 在WebView控件中，通过loadUrl方法加载网页内容，并通过setWebViewClient方法设置WebView控件的客户端。 6. 在WebViewClient类中，通过shouldOverrideUrlLoading方法控制WebView控件的跳转行为。 三、Android ...
iOS简单到无门槛调试WebView的步骤详解
08-27
- 启动你的iOS应用，当WebView加载HTML内容时，Safari的“开发”菜单中会列出相应的WebView页面。 - 选择对应的WebView页面，Safari将打开一个新的标签页，展示WebView的内容，此时你可以使用Web检查器进行调试。 ...
详解如何探测小程序返回到webview页面
10-17
2. **监听URL查询参数的变化**：在Webview加载的Vue应用中，我们可以利用Vue的`watch`功能来监听URL查询参数`ts`的变化。一旦`ts`发生变化，我们就可以调用`fetchData`和`patchRender`方法，以获取最新的数据并重新...
webviewjavascript
09-25
实现，oc和js交互，比如在原生种嵌入一个网页，页面与oc代码相互响应
IOS与网页JS交互详解及实例
08-31
3. **监听网页加载完成**：在`- (void)webViewDidFinishLoad:(UIWebView *)webView`方法中，你可以访问网页的JavaScript上下文并注册一个JavaScript函数，例如`passValue`，以接收JS传递的值。示例代码如下： ```...
详解Android WebView的input上传照片的兼容问题
08-29
在Android开发中，WebView是一个非常重要的组件，它允许在原生应用中内嵌网页内容并进行交互。然而，由于Android设备的版本多样性和系统碎片化问题，开发者在使用WebView时经常会遇到兼容性问题，尤其是在处理特定...
webview中去掉点击桌面控件出现橙色边框的问题
南巷故人的博客
02-18 1537
在xwalkview中加载web界面的时候上真机出现橙色边框的问题，解决办法有三种： 1.在根css文件中加上： div:focus, div:active, button:focus, button:active, a:focus, a:active { outline: none; } 2. body,div{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 3. .affected-element { outline: 1px solid transp
WebView拦截线上资源，加载离线资源
mrRuby的博客
01-31 1319
一、前言 最近的项目开发中接入了一些网页功能，Webview加载完成大约需要10秒左右，经过使用Charles抓包分析，发现在加载过程中出现了几个比较大的js和css文件，这些文件在没有压缩之前有15M左右，发布线上压缩有也有3M左右，这些资源严重影响了webview的加载速度，同时也带来了不好的体验。在极致情况下，web端应该去做这些优化处理，但在项目赶时间的情况下，客户端在做了这些大文件资源做了离线处理，让webview加载这些的时候从本地加载。 二、Webview拦截资源 2.1获取需要拦截的资源 /
JsBridge最详细的解析，高版本webview的evaluateJavascript
热门推荐
_长风的博客
09-14 3万+
android jsbridge原理详解，并加入API19以上版本的调用方法
web页面加载、解析、渲染过程
weixin_30535843的博客
03-28 469
对web项目进行优化首先得知道浏览器是怎么工作的这里推荐how browsers work中文版； 一、浏览器 浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置，通过DNS...
android通过WebView的evaluateJavascript()调用JS
weixin_30797027的博客
09-04 2747
因为该方法的执行不会使页面刷新，而方法（loadUrl ）的执行则会使页面刷新。 Android 4.4 后才可使用 同：https://www.cnblogs.com/liuyj-vv/p/9583831.html 仅java代码不同，可以接收JS函数的返回值 public class MainActivity extends Activity { ...
解决 Hbuilder打包 Apk pad 无法横屏 以及 H5 直接打包 成Apk
最新发布
一码归一码@
12-18 6095
下面是创建app 项目 wap站首页地址 可以配置 你H5的登录页 也可以是 你的index 页面 然后 会有一些 配置 你可以去百度 manifest.json 这个 配置文件 配置一下 就可以了 很方便 打包后直接 可以安装 到手机上。如果 你有自己的H5 也可以 自己去创建一个空壳 只需要 加上你 H5的请求地址 就可以了。当然 你的 H5前提是做了 自适应 不然 样式会很丑的。下面是manifest.json 配置文件。
详解Android WebView：集成与JS交互方法
1. 直接显示和渲染网页：WebView可以直接加载和呈现网页内容，无需跳转到外部浏览器，这对于提升用户体验和保持应用程序的一致性非常重要。 2. 使用HTML文件作为布局：WebView支持加载本地或网络上的HTML文件作为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孤独的冥王星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值