Android WebView填坑记录

前言

在应用程序开发过程中，经常会采用webview来展现某些界面，这样就可以不受发布版本控制，实时更新，遇到问题可以快速修复。

但是在Android开发中，由于Android版本分化严重，每一个版本针对webview都有部分更改，因此在开发过程中会遇到各种各样的坑，因此在此总结一下在开发过程中遇到的一些坑！

样例

这里不是讲解怎么进行webview开发，而是只罗列其中遇到的一些坑！为了展示这些问题，我们还是写一个样例来进行展开。

样例代码：

/**
 * WebView demo
 */
public class WebViewActivity extends AppCompatActivity {

    public static void start(Context context) {
        Intent intent = new Intent();
        intent.setClass(context, WebViewActivity.class);
        context.startActivity(intent);
    }

    private static final String TAG = "WebViewActivity";

    public static final String URL = "http://www.163.com";

    private static final int REQUEST_CODE_GET_LOCAL_FILE = 0;
    private static final int REQUEST_CODE_GET_LOCAL_FILE_NEW = 1;

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        findViews();
        initWebView();
    }

    /**
     * 查找界面view
     */
    private void findViews() {
        webView = (WebView) findViewById(R.id.web_view);
    }

    /**
     * 初始化webview参数
     */
    private void initWebView() {
        initWebSetting();
        setAcceptThirdPartyCookies();
        initWebClient();
        loadUrl();
    }

    /**
     * 加载地址
     */
    private void loadUrl() {
        webView.loadUrl(URL);
    }

    /**
     * 设置WebSetting
     */
    private void initWebSetting() {
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        webSettings.setUserAgentString(webSettings.getUserAgentString() + " VersionCode/" + InstallUtil
                .getVersionCode(this));
        webSettings.setAppCacheMaxSize(1024 * 1024 * 8);
        webSettings.setAllowFileAccess(true);
        webSettings.setAppCacheEnabled(true);
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        webSettings.setSupportZoom(true);
        webSettings.setGeolocationEnabled(true);
        webSettings.setDatabaseEnabled(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
    }

    /**
     * 设置跨域cookie读取
     */
    public final void setAcceptThirdPartyCookies() {
        //target 23 default false, so manual set true
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
        }
    }

    /**
     * 设置client
     */
    private void initWebClient() {
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                Log.e(TAG, "onProgressChanged newProgress=" + newProgress);
            }

            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback,
                                             FileChooserParams fileChooserParams) {
                Intent intent = fileChooserParams.createIntent();
                try {
                    startActivityForResult(intent, REQUEST_CODE_GET_LOCAL_FILE_NEW);
                } catch (Exception e) {
                    ToastUtil.showLong(getString(R.string.choose_fail));
                    return false;
                }
                return true;
            }

            //
            // FILE UPLOAD <3.0
            //
            public void openFileChooser(ValueCallback<Uri> uploadFile) {
                chooseFile(uploadFile, null, null);
            }

            public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType) {
                chooseFile(uploadFile, acceptType, null);
            }

            /**
             * 4.x
             * @param uploadFile
             * @param acceptType
             * @param capture
             */
            public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType, String capture) {
                chooseFile(uploadFile, acceptType, capture);
            }
        });
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                Log.e(TAG, "onPageStarted");
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Log.e(TAG, "onPageFinished");
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                Log.e(TAG, "onReceivedError");
            }

            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                super.onReceivedSslError(view, handler, error);
                Log.e(TAG, "onReceivedSslError");
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.e(TAG, "shouldOverrideUrlLoading url=" + url);
                return super.shouldOverrideUrlLoading(view, url);
            }
        });
    }

    private ValueCallback<Uri[]> uploadFileNew;
    private ValueCallback<Uri> uploadFile;

    /**
     * 文件选择
     *
     * @param uploadFile
     * @param acceptType
     * @param capture
     */
    private void chooseFile(ValueCallback<Uri> uploadFile, String acceptType, String capture) {
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        if (TextUtils.isEmpty(acceptType)) {
            acceptType = "*/*";
        }
        intent.setType(acceptType);

        this.uploadFile = uploadFile;

        try {
            startActivityForResult(Intent.createChooser(intent, capture), REQUEST_CODE_GET_LOCAL_FILE);
        } catch (Throwable tr) {
            tr.printStackTrace();
        }
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        switch (requestCode) {
            case REQUEST_CODE_GET_LOCAL_FILE:
                if (uploadFile != null) {
                    uploadFile.onReceiveValue((resultCode == Activity.RESULT_OK && data != null) ? data.getData() :
                            null);
                    uploadFile = null;
                }
                break;
            case REQUEST_CODE_GET_LOCAL_FILE_NEW:
                if (uploadFileNew != null) {
                    uploadFileNew.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
                    uploadFileNew = null;
                }
                break;
        }
    }
}

布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sunny.demo.webview.WebViewActivity">

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </WebView>

</RelativeLayout>

填坑

1，回调不成对

在WebView加载地址时，在加载过程中回调次数不一定相同，比如这里我们我们加载http://www.163.com。

E/WebViewActivity: onProgressChanged newProgress=10
E/WebViewActivity: onPageStarted
E/WebViewActivity: shouldOverrideUrlLoading url=http://3g.163.com/
E/WebViewActivity: onPageStarted
E/WebViewActivity: onPageStarted
E/WebViewActivity: shouldOverrideUrlLoading url=http://3g.163.com/touch/
E/WebViewActivity: onProgressChanged newProgress=50
E/WebViewActivity: onPageFinished
E/WebViewActivity: onProgressChanged newProgress=52
E/WebViewActivity: onProgressChanged newProgress=90
E/WebViewActivity: onProgressChanged newProgress=95
E/WebViewActivity: onProgressChanged newProgress=100
E/WebViewActivity: onPageFinished

从上面的日志中可以看到onPageStarted与onPageFinished次数不一致，因此如果你在start中进行进度条加载处理，finish中结束，会导致进度条一直不消失。因此可以在onProgressChanged进行处理。当newProgress为100时表示页面加载完成。

2，文件选择回调函数更改

如果你是web页面开发人员，如果要选取本地文件，可以采用input标签，如下一个简单的html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" accept="image/*;" capture="camera" >
    <a href="test1.html">url替换为test1页面</a>
    <script>
    var a = function() {
        //alert(1);
    };
    document.addEventListener(‘JSBridgeReady‘,a);
    </script>
</body>
</html>

附录

如果你不是专业的web开发人员，但是又想进行web页面调试，可以自己搭建一个web服务，如果你采用的是MAC可以采用如下方案进行web服务搭建

1.用node装一个http-server

2.brew install node

3.npm install -g http-server 安装

4.在一个目录下 http-server启动就是一个简单http服务里 port 8080

上面的代码加载后效果如下：

很简单吧！是不是想说so easy！！！那我们就点击一下选择文件吧！

咦没效果

换手机，好，有效果

再换，咦，又没有效果

是不是感觉很抓狂？这是由于Android的不同版本，WebView的回调函数都不一致。怎么解决这个问题？可以复写不同的回调函数，这里主要有以下四个回调函数，分别处理不同的版本：

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback,
                                 FileChooserParams fileChooserParams) {
    Intent intent = fileChooserParams.createIntent();
    try {
        startActivityForResult(intent, REQUEST_CODE_GET_LOCAL_FILE_NEW);
    } catch (Exception e) {
        ToastUtil.showLong(getString(R.string.choose_fail));
        return false;
    }
    return true;
}

//
// FILE UPLOAD <3.0
//
public void openFileChooser(ValueCallback<Uri> uploadFile) {
    chooseFile(uploadFile, null, null);
}

public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType) {
    chooseFile(uploadFile, acceptType, null);
}

/**
 * 4.x
 * @param uploadFile
 * @param acceptType
 * @param capture
 */
public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType, String capture) {
    chooseFile(uploadFile, acceptType, capture);
}

复写了上述四个函数，同时记得onActivityResult进行返回结果处理。就算是这样，我也不敢保证所有的手机都能正确的进行处理。

刚才在html中是否看到了一个一段document.addEventListener(‘JSBridgeReady’,a)这样的代码。这里是想说给出另外一种解决方案，可以采用JSBridge方式进行web页面与native页面交互，这样就可以屏蔽版本中间的差异。

3，跨域cookie读取

什么是跨域，简单的说就是不同的域名，我们都知道在pc上我们用浏览器访问网址，不同的网址都会在本地存储一些cookie信息，这样就可以实现比如自动登录等功能，在pc上不同域名是不能相互读取其他域下的cookie信息的（非web专业开发人员，如果理解有误，欢迎指出）。

但是在Android上在api 23之前，是可以跨域读取cookie的，比如A域写入一个userId的cookie，B域可以读取该值。但是在23时，系统将该值设置成了false，不再让跨域读取了。如果你的应用有跨域读取需求，怎么办？可以采用如下方式进行开启：

    /**
     * 设置跨域cookie读取
     */
    public final void setAcceptThirdPartyCookies() {
        //target 23 default false, so manual set true
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
        }
    }

这里我们来看看setAcceptThirdPartyCookies的注释：

Sets whether the {@link WebView} should allow third party cookies to be set.

Allowing third party cookies is a per WebView policy and can be set

differently on different WebView instances.

Apps that target {@link android.os.Build.VERSION_CODES#KITKAT} or below

default to allowing third party cookies. Apps targeting

{@link android.os.Build.VERSION_CODES#LOLLIPOP} or later default to disallowing

third party cookies.

4，http/https混合加载

在现阶段，很多网站都改成了https进行访问，https可以提升访问网站的安全性，防止信息被窃取，如果所有的网页都是https且网页内的链接也是都是https，那就没有混合加载的问题了。但是很多资源现阶段还没有改变成https访问，往往页面都嵌入了http的链接。这种混合网页如果不进行处理，直接加载是会出现错误的。怎么解决这个问题？

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

这也是一个分版本的函数，在api 23之前，默认是可以混合加载的，但是在23时，默认值改成了MIXED_CONTENT_NEVER_ALLOW，因此如果你有混合加载的需求，设置setMixedContentMode为MIXED_CONTENT_ALWAYS_ALLOW。

5，花屏

WebView如果开启了硬件加速，多次打开，会导致界面花屏，或者界面绘制有残留。这个在5.0刚出来的时候发生过多次，但是当时忘记截图了。当时也没有打算要把这些给记录下来。这里我已经复现不了了。如果你遇到了。关闭硬件加速就好了。

6，资源释放

这里我们先截取几张图来看看加载前与加载后webview内存的占用：

加载之前：

加载之后：

退出页面：

可以看到内存蹭蹭蹭的就上去了。就算退出去了也没有减少多少，因此这里必须手动进行资源释放，可以调用如下代码：

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

也可以采用在界面中动态创建webview，之后add到页面中，甚至更有人会为该页面单独设置一个进程，之后退出后会调用exit函数进行资源释放。这里可以根据需求来进行设置。

总结

WebView有这样或者那样的坑。这里只是大致罗列自己遇到的一些，在知乎上也看到一个专门讲WebView坑的查看链接。大家可以去看看，有什么新的发现也可以进行探讨。

时间： 2024-10-13 22:46:37

Android WebView填坑记录的相关文章

Android Tips – 填坑手册

出于: androidChina   http://www.androidchina.net/3595.html 学习 Android 至今,大大小小的坑没少踩,庆幸的是,在强大的搜索引擎与无私奉献的人们的帮助下,我遇到的坑都顺利地被填平了. 为了便于日后遇到同样的问题时,能免于再次搜索带来的麻烦,我养成了收藏书签的习惯,随着书签(Tips)的日积月累,我想,是时候该有这个项目了. 如果你是个 Android 新人,那么我希望这份列表,可以成为你踩到坑时的不完全手册. 当然,这份列表一定会有遗漏

Android WebView的坑总结

最近把做好的iPad HybridApp向Android迁移,碰到的坑太多了,让我这个折腾过Android接近4年的老鸟都头疼!现在把前人遇到的都列出来,再慢慢解决自己的,目前已经解决了android键盘覆盖问题,下面最棘手的问题就是屏幕高度的适配问题了!本文会不断更新 1. Andrid4.1事件穿透BUG 原因不明 2. Android2.X 中文不支持粗体 3. 目前发现的WEBVIEW尺寸宽度有320. 360. 400等多个尺寸 该分辨率或许和屏幕尺寸有关 目前测试结果 320-640

[临时向]蒟蒻的填坑记录

TAT这周开始填坑....这周大概是数据结构吧?来这里记录一下免得自己过几天又开始颓了TAT 1.3:中午看了下zkw线段树,写了bzoj3685...找前驱后缀的姿势不是很科学...不过速度相差不大就懒得改了. 晚上写treap..分别用zkw线段树和treap写了bzoj3224普通平衡树.....正常的treap大概300+ms...zkw线段树190+ms 1.4:中午用treap写了1503郁闷的出纳员....晚上写1058报表统计..弄了一晚上TAT 目测明天重开spaly...

F2eTest和UI Recorder自动化测试环境部署填坑记录

坑1:尝试部署的时候只在opennode.bat里面填写了两个浏览器,测试通过后再增加其他浏览器,页面上一直不显示.需要清空数据库里的`wd_browsers`和`wd_nodes`表,然后重启2008,数据库会重新加载新的节点信息.(此坑的解决方法在视频教程里,无文字版) 坑2:远程连接问题:在2008启动之后,node暂未启动前,f2etestweb页面可以打开3个浏览器页面.当webdriver云上显示node已经启动之后,f2etestweb页面只能可以打开1个浏览器页面,再多就会报连接

WebView填坑——小功能篇

这两天负责修改了几个关于在webview中打开公司移动站的bug.本身不是很难解,网上查查都有,但是也有必要记录下来作为备忘. Webview中上传文件 这里的效果类似在pc端上传文件效果,点击打开一个文件选择器,上传文件图片之类的. openFileChooser()方法的重载是因为在不同系统中调用的方法参数不一样,具体看注释. ValueCallback<Uri> mUploadMessage作为成员变量的目的是我们要在打开的系统文件选择器finish()后在onActivityResul

Android Studio采坑记录

折腾了几个月的Android Studio,终于在今天被我搞定了 (￣▽￣)~* 开贴记录下,免得下次再次采坑 先说下我之前电脑的环境配置吧,sdk是几年前在网上下载别人整理出来的包,一直没有更新过 (当然这里有各种原因,一是这里面东西太多,搞的自己云里雾里的,二是因为国内网络问题) 这里先把采坑点先写出来 1.sdk的问题(最好把常用的sdk和工具都更新一遍吧) 2.studio的代理问题(如图,开启工具s-s或s-s-r,配好代理,选择socks点击checkconntion,然后再输入ht

Android开发跳坑记录

本文主要记录在Android开发中遇见的一些问题,以及解决方法. 2015.12.01 1.adb.exe 端口被占用 解决: http://blog.csdn.net/xiaanming/article/details/9401981 http://blog.csdn.net/zeng_zhi_1991/article/details/48318495 2.emulator: ERROR: Unable to load VM from snapshot. The snapshot has be

zimbra填坑记录

邮件服务器上架,问题记录. 1.DNS解析设置,zimbra收发邮件均使用统一域名,mail.xxxx.com.cn,因此在做SMTP,POP,MX记录时均应指向此域名. 2.实际上架内部网络和安装所在网络环境不一致,导致网页端能登陆,但是发送邮件被拒绝,解决办法如下 修改当前域名下MTA信任的网络为实际的网络. 3.检查服务器出口所在IP是否是A记录指向的IP地址,使用此命令可以查询到,再未确认IP地址是否正确是,请勿发送测试邮件,我就是漏此步发送测试邮件,被总部邮件系统拉入黑名单了,伤心!

win10 Build 14905.rs_prerelease.160811-1739 填坑记录

问题一 腾讯游戏不能玩了,这个使用win7兼容性模式可以玩. 问题二 迅雷无限崩溃  官方补丁 http://down.sandai.net/thunderpatch/KB2016042601.exe 问题三 显示效果差 下载自己笔记本电脑官方显卡驱动win8版本即可,安装完成后切记关闭设备管理器的自动更新功能,否则又给你把驱动换了,不知道怎么关自行百度. 问题三 开机黑屏差不多2分钟的黑屏 amd双显卡问题bug,显卡型号HD7670M,华硕K53TK 使用ulps_enable_disabl