Phonegap and jquery mobile : a href -> Origin null is not allowed by Access-Control-Allow-Origin

jquery-mobile cordova

13,550

Solution 1

Here's the official documentation on how to do just what you are looking for...

Hope this helps!

Solution 2

Leon's comment is the correct answer - you need to add rel="external" to static links.

Solution 3

To Test

Download mongoose http server
copy mongoose_xxxxxxx.exe file to your assets/www
Now you can design your html pages for jquery mobile without Access-Control-Allow-Origin

13,550

user1092194

Updated on June 04, 2022

Comments

user1092194 almost 2 years

Im trying to use jquery mobile with phonegap, in a multi-page document. Tring to use basic href links within the document, gives the Origin null is not allowed by Access-Control-Allow-Origin error which is quite annoying.

This is because the index page is refered to via file:// rather than http:// which webkit interprets as origin null. Has anyone got jquery mobile and phonegap to work in a multi page environment? if so how can you do it? If you add rel=external to the href tags the links work, but of course all the transitions are lost.

Cant find any info on this specific problem on stack overflow or teh internetz.

<!DOCTYPE HTML>
<html>

<head>
<title>PhoneGap</title>

<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>   
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
    $(document).bind( "mobileinit", function(){
        //alert("mobileinit fired");  
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;       
    });        
</script>   
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<script type="text/javascript">

function onDeviceReady() {
    navigator.network.isReachable("google.com", reachableCallback, {});
}
// Check network status
function reachableCallback(reachability) {
    // There is no consistency on the format of reachability
    var networkState = reachability.code || reachability;
    var states = {};
    states[NetworkStatus.NOT_REACHABLE]                      = 'No network connection';
    states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
    states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK]         = 'WiFi connection';
    if (networkState != 0) online = true;
}
var online = navigator.onLine || false;

$(document).ready(function() { 
    $(document).bind('deviceready', function(){
        onDeviceReady()
})
// Your main code
})
//Now if you about to make an AJAX call to load up some dynamic data, you can easily check to see if you're online
if(online) {
    } else {
}


</script>

</head>

    <body>
        <h1>Welcome to PhoneGap</h1>
    <a href="edit.html">Edit html</a>
    </body>

</html>

user1092194 over 12 years

hi leon, thanks for your input but unfortunately this doesnt answer the question, the example in the documentention uses a single html page with anchor links to various divs within the document, which i know how to do. I'm asking if its possible to link to other html documents using the ajax transitions, which i suspect ATM isnt.
Leon over 12 years

did you try the standard JQM way of doing this, i.e. <a href="edit.html" rel="external" data-role="button" data-transition="flip">flip</a> ?
eMarine almost 11 years

All answers are wrong. The first don't answer, just says "Search it" And the second answer does not specify if they want an external or ajax load page, and question says that they want transitions, then, external is not a solution.
eMarine almost 11 years

Nope, they want transitions. External link is not a solution
Chandan C over 8 years

I have tried with multiple page requests. if you are targeting app above JELLY_BEAN(API Level 16), here is what you can add to MainActivity class. if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) { super.appView.getSettings().setAllowUniversalAccessFromFileU‌RLs(true); } Which will allow null origin XHR requests.