安卓webview如何加载assets文件夹中的javascript文件

Question

我看到这个问题已经被问了很多次，但仍然无法让我的代码正常工作。

我想让我的webview加载一些URL（比如www.google.com），然后应用存储在assets/jstest.js中的一些javascript代码，其中包含以下内容：

function test(){
document.bgColor="#00FF00"; //turns to green the background color
}

这里是我尝试加载JS的地方：

@Override  
public void onPageFinished(WebView view, String url){
    view.loadUrl("javascript:(function() { "
                + " document.bgColor='#FF0000';" //turns to red the background color
                + " var script=document.createElement('script'); "
                + " script.setAttribute('type','text/javascript'); "
                + " script.setAttribute('src', 'file:///android_asset/jstest.js'); "
                + " script.onload = function(){ "
                + "     test(); "
                + " }; "
                + " document.getElementsByTagName('head')[0].appendChild(script); "
                + "})()"); 
} 

我知道这里的JavaScript代码可行，因为背景颜色实际上会变成红色，但是由于某种原因它无法加载jstest.js文件。我认为问题可能在于文件路径（我确定JavaScript代码的每一行都是正确的），但是对我来说看起来是正确的，并且文件在正确的文件夹中。

我错过了什么？

编辑：

由于WebResourceResponse类仅适用于API级别11，因此最终我弄清楚了以下内容。

public void onPageFinished(WebView view, String url){
        String jscontent = "";
        try{
            InputStream is = am.open("jstest.js"); //am = Activity.getAssets()
            InputStreamReader isr = new InputStreamReader(is);
            BufferedReader br = new BufferedReader(isr);

            String line;
            while (( line = br.readLine()) != null) {
                jscontent += line;
            }
            is.close(); 
        }
        catch(Exception e){}
        view.loadUrl("javascript:(" + jscontent + ")()"); 
    } 

只需在jstest.js中简单地包含：

function() {
    document.bgColor="#00FF00";
}

- Jacob

Answer 1

我尝试了同样的事情，将一个书签脚本（在您的loadUrl()调用中的javascript代码）加载到第三方页面中。我的书签脚本还依赖其他资源（javascript和css文件），这些资源无法通过file:///android_asset URL加载。

那是因为页面的安全上下文仍然是例如http://www.google.com的，而这不允许访问file: URL。如果您提供/覆盖WebChromeClient.onConsoleMessage()，则应该能够看到错误信息。

最终我使用了一个折衷方法，将书签脚本的资源引用更改为虚假的URL方案，如：

asset:foo/bar/baz.js

并添加了一个WebViewClient.shouldInterceptRequest()重写，它查找这些内容并使用AssetManager.open()从资产中加载它们。

我不喜欢这个修补方法的一件事是asset:方案开放给任何第三方HTML / JavaScript在我的视图加载的任何页面上，使它们可以访问我的应用程序资产。

另一种选择（我没有尝试）是在bookmarklet中使用data: URL嵌入子级资产，但这可能会变得笨重。

我更喜欢的是，如果有一种方法可以操纵loadUrl()中加载的JS书签的安全上下文，但我找不到类似的东西。

以下是片段：

import android.webkit.WebResourceResponse;
...
    private final class FooViewClient extends WebViewClient
    {
    private final String bookmarklet;
    private final String scheme;

    private FooViewClient(String bookmarklet, String scheme)
        {
        this.bookmarklet = bookmarklet;
        this.scheme = scheme;
        }

    @Override
    public void onPageFinished(WebView view, String url)
        {
        view.loadUrl(bookmarklet);
        }

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url)
        {
        if (url.startsWith(scheme))
            try
                {
                return new WebResourceResponse(url.endsWith("js") ? "text/javascript" : "text/css", "utf-8",
                        Foo.this.getAssets().open(url.substring(scheme.length())));
                }
            catch (IOException e)
                {
                Log.e(getClass().getSimpleName(), e.getMessage(), e);
                }

        return null;
        }
    }

- dimitris

---

好的，看起来这个问题没有“干净”的解决方案。我考虑过将所有的JavaScript代码与loadUrl()一起编写，这样就可以无问题地工作，但肯定不是最好的选择。所以，我尝试了你的权宜之计，但似乎无法覆盖shouldInterceptRequest() - 我无法导入WebResourceResponse类 - 你能帮我发布一些代码吗？ - Jacob

我尝试了你的代码片段，但是WebResourceResponse类仅适用于API Level 11（我正在使用Level 10），所以恐怕它不起作用...无论如何，我想我已经找到了另一个解决方法！再次感谢你的帮助！ - Jacob

不错！另一个选项是将本地JS（来自资产）注入到WebView读取的inputStream中，这也对WebView透明。但我更喜欢你的解决方案，因为它更方便。好的，与其使用URL方案，我宁愿使用一种众所周知的路径来映射到资产，而不是明显地暴露模式，即<script src="jsl/jquery.js"></script>最终会从本地资产加载jquery.js，因为“jsl”路径已知于我的应用程序，以提供来自资产的资源。 - comeGetSome

Answer 2

这是我最终采用的方法。我使用了Content://协议，并设置了一个内容提供者来处理返回文件描述符给系统。

这是我的fileContentProvider：

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;

import org.apache.commons.io.IOUtils;


import android.content.ContentProvider;
import android.content.ContentValues;
import android.database.Cursor;
import android.net.Uri;
import android.os.ParcelFileDescriptor;
import android.util.Log;

public class FileContentProvider extends ContentProvider {
    @Override
    public ParcelFileDescriptor openFile(Uri uri, String mode) {

        Log.d("FileContentProvider","fetching: " + uri);

        ParcelFileDescriptor parcel = null;

        String fileNameRequested = uri.getLastPathSegment();
        String[] name=fileNameRequested.split("\\.");
        String prefix=name[0];
        String suffix=name[1];
       // String path = getContext().getFilesDir().getAbsolutePath() + "/" + uri.getPath();
        //String path=file:///android_asset/"+Consts.FILE_JAVASCRIPT+"

/*check if this is a javascript file*/

        if(suffix.equalsIgnoreCase("js")){
        InputStream is = null;
        try {
            is = getContext().getAssets().open("www/"+Consts.FILE_JAVASCRIPT);
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }


        File file = stream2file(is,prefix,suffix);
        try {
            parcel = ParcelFileDescriptor.open(file, ParcelFileDescriptor.MODE_READ_ONLY);
        } catch (FileNotFoundException e) {
            Log.e("FileContentProvider", "uri " + uri.toString(), e);
        }
        }
        return parcel;
    }

    /*converts an inputstream to a temp file*/

    public File stream2file (InputStream in,String prefix,String suffix) {
        File tempFile = null;
        try {
            tempFile = File.createTempFile(prefix, suffix);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        tempFile.deleteOnExit();

            FileOutputStream out = null;
            try {
                out = new FileOutputStream(tempFile);
            } catch (FileNotFoundException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } 

            try {
                IOUtils.copy(in, out);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }

        return tempFile;
    }


    @Override
    public boolean onCreate() {
        return true;
    }

    @Override
    public int delete(Uri uri, String s, String[] as) {
        throw new UnsupportedOperationException("Not supported by this provider");
    }

    @Override
    public String getType(Uri uri) {
        throw new UnsupportedOperationException("Not supported by this provider");
    }

    @Override
    public Uri insert(Uri uri, ContentValues contentvalues) {
        throw new UnsupportedOperationException("Not supported by this provider");
    }

    @Override
    public Cursor query(Uri uri, String[] as, String s, String[] as1, String s1) {
        throw new UnsupportedOperationException("Not supported by this provider");
    }

    @Override
    public int update(Uri uri, ContentValues contentvalues, String s, String[] as) {
        throw new UnsupportedOperationException("Not supported by this provider");
    }
}

在清单文件中，我定义了提供程序：

<provider android:name="com.example.mypackage.FileContentProvider"
          android:authorities="com.example.fileprovider"
        />

这是要注入到Webview中的JavaScript代码：

webView.loadUrl("javascript:(function() { "

           + "var script=document.createElement('script'); "
           + " script.setAttribute('type','text/javascript'); "
           + " script.setAttribute('src', 'content://com.example.fileprovider/myjavascriptfile.js'); "
      /*      + " script.onload = function(){ "
           + "     test(); "
           + " }; "
      */     + "document.body.appendChild(script); "
           + "})();");

这是我的javascript文件myjavascriptfile.js（仅供参考）：

   function changeBackground(color) {
       document.body.style.backgroundColor = color;
   }

- j2emanue

Answer 3

我认为cordova的IceCreamCordovaWebViewClient可以完成您想要做的事情。

如果有文档记录这一点就太好了，但据我所见，似乎没有。

请查看cordova的android github： https://github.com/apache/incubator-cordova-android/blob/master/framework/src/org/apache/cordova/IceCreamCordovaWebViewClient.java

- nurieta

Answer 4

给定以下两个条件：

• minSdkVersion 21
• targetSdkVersion 28

我能够通过以下Java代码成功加载任何本地资源（js、png、css）

@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
    Uri uri = request.getUrl();
    if (uri.getHost().equals("assets")) {
        try {
            return new WebResourceResponse(
                URLConnection.guessContentTypeFromName(uri.getPath()),
                "utf-8",
                MainActivity.this.getAssets().open(uri.toString().substring(15)));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    return null;
}

而在 HTML 代码中，我可以使用

<link rel="stylesheet" href="https://assets/material.min.css">
<script src="https://assets/material.min.js"></script>
<script src="https://assets/moment-with-locales.min.js"></script> 
<img src="https://assets/stackoverflow.png">

在Java中，以下内容也适用（您还需要将favicon.ico添加到资产中）。

webView.loadUrl("https://assets/example.html");

使用 https:// 作为协议允许我在通过 HTTPS 提供的页面上加载本地资产，而不会因混合内容导致安全问题。

无需设置 上述内容：

webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
webSettings.setDomStorageEnabled(true);
webSettings.setAllowContentAccess(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);    

- Daniel F

Answer 5

也许您可以将资源作为“HTML/JavaScript模板”。您可以组合不同的文本源和字符串逻辑来组成所需的HTML，以加载到WebViewer中。然后，您可以使用.loadData而不是.loadUrl

我自己正在使用它，似乎效果不错。

希望能对您有所帮助！

- Dani bISHOP