![](/img/trans.png)
[英]Load external javascript file inside HTML file from android assets folder into WebView
[英]Android webview, loading javascript file in assets folder
我已經看過很多次這個問題,但仍然無法讓我的代碼工作。
我希望我的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 Level 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";
}
我嘗試了同樣的事情,將bookmarklet(你的loadUrl()調用中的javascript代碼)加載到第三方頁面。 我的bookmarklet還依賴於其他資源(javascript和css文件),這些資源不會加載文件:/// android_asset URL。
這是因為頁面的安全上下文仍然是例如http://www.google.com的安全上下文,並且不允許訪問文件:URL。 如果提供/覆蓋WebChromeClient.onConsoleMessage(),您應該能夠看到錯誤。
我最終得到了一個kludge,我將bookmarklet的資產引用更改為偽造的URL方案,如:
asset:foo/bar/baz.js
並添加了一個WebViewClient.shouldInterceptRequest()覆蓋,它會查找這些內容並使用AssetManager.open()從資產中加載它們。
我不喜歡這個問題的一件事是,資產:方案對我的視圖加載的任何頁面上的任何第三方HTML / Javascript開放,使他們可以訪問我的應用程序的資產。
我沒有嘗試的另一種方法是使用數據:URL來將子資產嵌入書簽中,但這可能會變得難以處理。
我更喜歡它,如果有操縱只是 JS書簽我加載在使用loadURL()的安全上下文的方式,但我找不到這樣的事情。
這是一個片段:
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;
}
}
我認為cordova的iceam cream webview客戶端可以做你想做的事情。
如果在某處記錄這將是很好的,但據我所知,它不是。
看看cordova的android github: https : //github.com/apache/incubator-cordova-android/blob/master/framework/src/org/apache/cordova/IceCreamCordovaWebViewClient.java
這是我最終如何做到這一點。 我使用Content://協議並設置contentprovider來處理將文件描述符返回給系統
這是我的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 o:
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;
}
給出以下兩個條件:
我可以通過以下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);
也許你可以把資產作為'html / javascript模板'。 您可以將這些文本源和字符串邏輯中的不同組合在一起,以組成要加載到WebViewer中的所需html。 然后,使用.loadData而不是.loadUrl
我自己使用它似乎工作得很好。
希望能幫助到你!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.