Android Web-View:将本地Javascript文件注入远程网页

时间:2014-02-04 12:43:24

标签: javascript android caching webview

以前曾多次询问过,我浏览了所有内容,但还没有明确的答案。

问题简化:是否可以将本地Javascript文件(从资产或存储)注入Android Web视图中加载的远程网页?我知道可以将这些文件注入Web视图中加载的本地Web页面(资产HTML)。

为什么我需要这个呢? :通过避免每次都下载较大的文件(如Js和CSS文件)来提高浏览体验。我想避免Web-View缓存。

4 个答案:

答案 0 :(得分:51)

有一种方法可以“强制”从本地资产(例如,assets / js / script.js)注入本地Javascript文件,并绕过'不允许加载本地资源:file:/// android_assets / js / script.js ...'问题。

它类似于另一个线程(Android webview, loading javascript file in assets folder)中描述的内容,使用额外的BASE64编码/解码将Javascript文件表示为可打印的字符串。

我使用的是Android 4.4.2,API级别19虚拟设备。

以下是一些代码段:

[资产/ JS /的script.js]:

    'use strict';

    function test() {
       // ... do something
    }

    // more Javascript

[MainActivity.java]:

    ...

    WebView myWebView = (WebView) findViewById(R.id.webView);
    WebSettings webSettings = myWebView.getSettings();

    webSettings.setJavaScriptEnabled(true);
    webSettings.setAllowUniversalAccessFromFileURLs(true);
    myWebView.setWebViewClient(new WebViewClient() {
       @Override
       public boolean shouldOverrideUrlLoading(WebView view, String url) {
          return false;
       }

       @Override
       public void onPageFinished(WebView view, String url) {
          super.onPageFinished(view, url);

          injectScriptFile(view, "js/script.js"); // see below ...

          // test if the script was loaded
          view.loadUrl("javascript:setTimeout(test(), 500)");
       }

       private void injectScriptFile(WebView view, String scriptFile) {
          InputStream input;
          try {
             input = getAssets().open(scriptFile);
             byte[] buffer = new byte[input.available()];
             input.read(buffer);
             input.close();

             // String-ify the script byte-array using BASE64 encoding !!!
             String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
             view.loadUrl("javascript:(function() {" +
                          "var parent = document.getElementsByTagName('head').item(0);" +
                          "var script = document.createElement('script');" +
                          "script.type = 'text/javascript';" +
             // Tell the browser to BASE64-decode the string into your script !!!
                          "script.innerHTML = window.atob('" + encoded + "');" +
                          "parent.appendChild(script)" +
                          "})()");
          } catch (IOException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
          }
       }
    });

    myWebView.loadUrl("http://www.example.com");

    ...

答案 1 :(得分:6)

是的,您可以使用shouldInterceptRequest()来拦截远程网址加载并返回本地存储的内容。

WebView webview = (WebView) findViewById(R.id.webview);

webview.setWebViewClient(new WebViewClient() {
    @Override
    public WebResourceResponse shouldInterceptRequest (final WebView view, String url) {
       if (url.equals("script_url_to_load_local")) {
           return new WebResourceResponse("text/javascript", "UTF-8", new FileInputStream("local_url")));
       } else {
           return super.shouldInterceptRequest(view, url);
       }
    }
});

答案 2 :(得分:5)

loadUrl仅适用于旧版本evaluateJavascript

webview.evaluateJavascript("(function() { document.getElementsByName('username')[0].value='USERNAME';document.getElementsByName('password')[0].value='PASSWORD'; "+
"return { var1: \"variable1\", var2: \"variable2\" }; })();", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String s) {
                    Log.d("LogName", s); // Prints: {"var1":"variable1","var2":"variable2"}
                }
            });

答案 3 :(得分:0)

小心使用evaluateJavascript:如果您的javascript中出现语法错误或异常,它会将您的onReceiveValue调用为null。支持SDK 19和更低版本的最常见方式似乎如下:Fill form in WebView with Javascript

此外,如果您非常渴望某种浏览器功能(在我的情况下,永远无法弄清楚如何让DRM正常工作)您可以使用普通chrome中的书签,仅当您键入书签名称时才能使用进入多功能框,但确实有效,并注入了javascript。

另请注意,使用默认WebView您无法使用javascript警报来测试任何内容,但它们不会显示。另请注意,默认情况下“视频”(如html&lt; video&gt;标记)默认情况下“无法正常工作”,默认情况下DRM视频也不起作用,它们都是配置选项:\