Android WebView + AJAX local files

Question

I have an android webview loading a website that I have locally in my assets. I've not built it myself, and I have very little control over the markup, js etc.

Problem: Parts of the website use jquery $.ajax-gets to fetch HTML to display in a modal, and I think I've run into a cross-domain problem (if I test the site locally on my desktop I get same-origin-warnings, my origin is "null"), ie for some reason the local js can't ajax-get other local files in the assets folder because the underlying browser thinks these are from different origins. I've read whatever I can get my hands on concerning this, and nothing seems to make any difference. Not getting any errors or warnings in LogCat.

This is running on a Nexus 7, files are located in the assets folder (file:///android_asset). Everything else works fine, but no luck with the ajax GETs.

From the manifest:

<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" />

Relevant webview code:

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");
}    

Here's the relevant 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) );
    }
});
};

Am I missing something here? Is there truly no way to do ajax GETs over local file content? Note that I only have the local files to work with, normal use case is that the tablet is not connected to the internet when using the app, so any external calls are a no-go.

Solution 1

You need to allow crossdomain. In this example, crossdomain is allowed for json values and for scripts.

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

Solution 2

Thanks for answer @njzk2, I've made it:

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

Make it working in firefox, chrome and IE to load a local file ( not through any server )

I was personnaly lacking this parameter which target api 16 at least ( wondering if any other parameter could target any older API )

mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);

thanks

Comments

[nahkampf]

Well I'll be... That worked. Did this: $.ajaxPrefilter( 'text', function( options ) { options.crossDomain = true; }); $.ajax({ url: source, type: 'GET', dataType: 'text', Thanks!