web-dev-qa-db-ja.com

Android webview、assetsフォルダにJavaScriptファイルを読み込んでいます

この質問が何度も尋ねられるのを見ましたが、それでもコードを機能させることができません。

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コードの1行おきに正しいと確信しています）が、それは私には正しいように見えます。そして、ファイルは正しいフォルダにあります。

何が欠けていますか？

[〜＃〜]編集[〜＃〜]：

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";
}
javascriptandroidwebviewandroid-webview
16
Jacob

ブックマークレット（loadUrl（）呼び出しのJavaScriptコード）をサードパーティのページにロードして、同じことを試しました。私のブックマークレットは、file：/// Android_asset URLでロードされない他のアセット（javascriptおよびcssファイル）にも依存しています。

これは、ページのセキュリティコンテキストが http://www.google.com などのセキュリティコンテキストのままであり、file：URLへのアクセスが許可されていないためです。 WebChromeClient.onConsoleMessage（）を提供またはオーバーライドすると、エラーを確認できるはずです。

最終的に、ブックマークレットのアセット参照を次のような偽のURLスキームに変更したところ、

asset:foo/bar/baz.js

それらを探し、AssetManager.open（）を使用してアセットからロードするWebViewClient.shouldInterceptRequest（）オーバーライドを追加しました。

このkludgeについて私が気に入らない点の1つは、アセット：スキームが、ビューがロードするすべてのページでサードパーティのHTML/Javascriptに対して開かれていて、アプリのアセットにアクセスできることです。

私が試さなかった1つの代替策は、data：URLを使用してサブアセットをブックマークレットに埋め込むことですが、これは扱いにくい場合があります。

LoadUrl（）でロードしているJSブックマークレットのjustのセキュリティコンテキストを操作する方法があったら、私はそれをはるかに好みますが、私はそのようなものを見つけることができません。

これがスニペットです：

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;
        }
    }
8
dimitris

ここに私がそれをやってしまった方法があります。 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); "
           + "})();");

そしてこれがmyjavascriptfile.js（例として）です：

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

CordovaのIceam Cream WebViewクライアントは、まさにあなたがやりたいことをやっていると思います。

これがどこかに文書化されていればいいのですが、私の知る限りではそうではありません。

コルドバのAndroid github： https://github.com/Apache/incubator-cordova-Android/blob/master/framework/src/org/Apache/cordova /IceCreamCordovaWebViewClient.Java

1
nurieta

次の2つの条件が与えられた場合：

  • 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);
0
Daniel F

多分あなたは 'html/javascriptテンプレート'として資産を持つことができました。これらの異なるテキストソースと文字列ロジックを組み合わせて、WebViewerにロードする必要なHTMLを作成できます。次に、.loadUrlの代わりに.loadDataを使用します。

私はそれを自分で使用していて、かなりうまくいくようです。

それが役に立てば幸い！

0
Dani bISHOP