Android WebView + AJAX 本地文件答案

【问题标题】：Android WebView + AJAX local filesAndroid WebView + AJAX 本地文件
【发布时间】：2013-12-23 21:32:41
【问题描述】：

我有一个 android webview 加载我在本地资产中的网站。我没有自己构建它，我对标记、js等几乎没有控制权。

问题：网站的某些部分使用 jquery $.ajax-gets 来获取 HTML 以在模式中显示，我认为我遇到了跨域问题（如果我在桌面上本地测试该网站，我得到same-origin-warnings，我的来源是“null”），即由于某种原因，本地 js 无法 ajax-get 资产文件夹中的其他本地文件，因为底层浏览器认为这些来自不同的来源。我已经阅读了有关此问题的所有内容，但似乎没有任何区别。在 LogCat 中没有收到任何错误或警告。

这是在 Nexus 7 上运行的，文件位于资产文件夹 (file:///android_asset) 中。其他一切正常，但 ajax GET 没有运气。

来自清单：

<uses-sdk
    android:minSdkVersion="16"
    android:targetSdkVersion="18" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

相关webview代码：

mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setSupportMultipleWindows(true);
mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
mWebView.setHorizontalScrollBarEnabled(false);
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.getSettings().setAllowFileAccessFromFileURLs(true);
mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
mWebView.addJavascriptInterface(this, "android");
if (savedInstanceState != null) {  
    mWebView.restoreState(savedInstanceState);
} else {          
    mWebView.loadUrl("file:///android_asset/site/index.html");
}

下面是相关的js：

var load = function ( source, callback, dontShowLoader ) {
if( !dontShowLoader ) {
    loading( 'show' );
}
$.ajax({
    url: source,
    type: 'GET',
    data: {
        campaign: true
    },
    success: function ( data ) {
        var $data = $(data);
        loading( 'hide' );
        $data.data( 'url', source );
        callback( $(data) );
    }
});
};

我在这里遗漏了什么吗？真的没有办法对本地文件内容进行 ajax GET 吗？请注意，我只有可以使用本地文件，正常的用例是平板电脑在使用应用程序时没有连接到互联网，所以任何外部呼叫都是不行的。

【问题讨论】：

标签： javascript android ajax webview cross-domain

【解决方案1】：

您需要允许跨域。在此示例中，json 值和脚本允许跨域。

$.ajaxPrefilter( "json script", function( options ) {
    options.crossDomain = true;
});

【讨论】：

好吧，我会……那行得通。这样做了：$.ajaxPrefilter('text', function(options) { options.crossDomain = true; }); $.ajax({ url: source, type: 'GET', dataType: 'text', 谢谢！

【解决方案2】：

感谢@njzk2 的回答，我做到了：

$.ajaxPrefilter( 'text', function( options ) { options.crossDomain = true; }); 
$.ajax({ url: source, type: 'GET', dataType: 'text'

让它在 Firefox、chrome 和 IE 中工作以加载本地文件（不通过任何服务器）

我个人缺少这个至少针对 api 16 的参数（想知道是否有任何其他参数可以针对任何旧 API）

mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);

谢谢

【讨论】：