Android WebView + AJAX local files

ajax, android, cross-domain, javascript, webview

Solution

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

Problem

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.

Original source