Android WebView使用时JS的坑

                                          Android WebView使用时JS的坑

       这一周一直在搞学校就业指导中心的几个项目，听说是教育部有领导来视察，要我们来收拾学长以前帮就业指导中心做的几个项目的烂摊子，其实也不算烂摊子，我们算是完全重新开发吧，连以前的算法都用不了，还好当时机智，没有在以前的项目基本上改，否则这周估计都是在看代码了。言归正传，讲讲Android WebView的坑。说起来真的超级惭愧，这个坑本来完全是我Android端的问题，却让前端的妹子改了三四个小时的代码。事情大概是这样的，一个项目是前端做html+css+js的纯前端，然后放到Android项目的assets目录下，让WebView去加载网页，前面有几个项目也是这样做的，但是却在这个项目时工作得不好，当点击一个页面跳转时，总是跳转不了，这个页面跳转是JS控制的，其实就是用JS控制一个DIV隐藏另一个DIV显示，就相当于自己做了一个模态框。那妹子做好了之后可以在浏览器中正常工作，但在我用WebView包装的Android APP里老是不能工作。我觉得肯定是JS的问题，因为我觉得前面几个这种项目Android端也是这样写的，肯定不是我Android端的问题。然后我就一直让她改，让她把div显示与隐藏改成html跳转，但还是不能正常工作，然后我觉得可能是在本地不能正常工作，我就让她部署到云服务器上，但依然不行，反正这样改来改去，就改了三四个小时，而我又在管其他几个项目，我要管所有的Android项目，还要统筹所有的前端后端的东西，再加上这周每天几乎都只睡了三四个小时，脑袋实在有点晕，我就一直想是JS的问题。最后忙完了其他几个项目，就剩她这个项目的问题了，然后我就一直查WebView的一些使用细节，无意间，她跟我说她在JS中使用了Localstorage,问我是不是这个问题，然后我就百度了一下，在Android 的WebView使用时，确实会有这方面的问题，WebView默认是不支持Localstorage的。下面把代码贴一下

package benson.com.workreadysystem;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

//    private static final String URL = "http://career.sumixer.com:8084/workready/index2";
    private static final String URL = "file:///android_asset/index2.html";

    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        webView.setWebChromeClient(new WebChromeClient());

        //支持App内部javascript交互

        webView.getSettings().setJavaScriptEnabled(true);

        //自适应屏幕

        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

        webView.getSettings().setLoadWithOverviewMode(true);

        //设置可以支持缩放

        webView.getSettings().setSupportZoom(true);

        //扩大比例的缩放

        webView.getSettings().setUseWideViewPort(true);

        //设置是否出现缩放工具

        webView.getSettings().setBuiltInZoomControls(true);
        
        //这几行是localstorage添加的
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setAppCacheMaxSize(1024*1024*8);
        String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
        webView.getSettings().setAppCachePath(appCachePath);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setAppCacheEnabled(true);

        webView.loadUrl(URL);
    }

    @Override
    public void onBackPressed() {
        webView.loadUrl(URL);
    }
    private volatile boolean pressed = false;
}

加上Localstorage支持后前面所说的问题就解决了，无端让前端妹子浪费了三四个小时，真的很sorry。最后她跟我说她早就跟我提过JS中使用了Localstorage，问我是不是Localstorage的问题，但我当时太忙了，没太在意她说的，悲剧就这样产生了，说实在的，责任完在我。真的很对不起前端妹子。7月份就要出去实习了，也祝妹子去腾讯能够工作顺利。