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

Question

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>

Leon Leon · Accepted Answer · 2011-12-14T15:29:29

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

Hope this helps!

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

5 Answers