Android webview，在资产文件夹中加载javascript文件

Posted 2023-05-07

【中文标题】Android webview，在资产文件夹中加载javascript文件

【英文标题】：Android webview, loading javascript file in assets folder

【发布时间】：2011-08-04 16:21:14

【问题描述】：

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

我希望我的 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";

【参考方案1】：

我尝试了同样的方法，将书签（您的 loadUrl() 调用中的 javascript 代码）加载到第三方页面中。我的书签还依赖于其他资源（javascript 和 css 文件），这些资源不会使用 file:///android_asset URL 加载。

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

最后我把书签的资产引用更改为伪造的 URL 方案，例如：

asset:foo/bar/baz.js

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

我不喜欢这个组合的一点是，asset: 方案对我的视图加载的任何页面上的任何第三方 html/Javascript 开放，使他们能够访问我的应用程序的资产。

我没有尝试过的另一种方法是使用 data: URL 将子资产嵌入到书签中，但这可能会变得笨拙。

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

这是一个sn-p：

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;
        
    

【讨论】：

好的，所以看起来这个问题没有“干净”的解决方案。我考虑过在 loadUrl() 中编写所有的 javascript 代码，这可以毫无问题地工作，但可以肯定的是不会是最好的选择。所以，我正在尝试你的 kludge，但我似乎无法覆盖 shouldInterceptRequest() - 我无法导入 WebResourceResponse 类 - 你能帮我发布一些代码吗？

我已经尝试过你的 sn-p，但是 WebResourceResponse 类仅适用于 API 级别 11（我使用的是级别 10），所以恐怕它不会工作.. 无论如何，我想我已经找到了另一种解决方法！再次感谢您的帮助！

不错！另一种选择是将本地 JS（来自资产）注入到 WevView 读取的 inputStream 中，这对 WebView 也是透明的。但我更喜欢你的解决方案，因为它更方便。好的，而不是使用 url 方案，我宁愿使用一种众所周知的路径来映射到资产，而不是明显公开模式，即 最终会加载jquery.js 来自本地资产，因为我的应用程序知道“jsl”路径可以从资产中提供资源。

【参考方案2】：

我认为 cordova 的冰淇淋 webview 客户端可以满足您的需求。

如果这被记录在某处就好了，但据我所知，事实并非如此。

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

【参考方案3】：

这就是我最终的做法。我使用了 Content:// 协议并设置了一个 contentprovider 来处理将文件描述符返回给系统

这是我的文件内容提供者：

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); "
           + ")();");

这里是 myjavascriptfile.js（例如）：

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

【参考方案4】：

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

我自己使用它，它似乎工作得很好。

希望对你有帮助！

【参考方案5】：

给出以下两个条件：

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/***.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);