JSONP calls not working with apple-mobile-web-app-capable=“yes”

Question

The Problem: With <meta name="apple-mobile-web-app-capable" content="yes" /> set, all of my jsonp requests are getting denied. I read that by setting content="yes", you cannot change the page. But I was unaware you couldnt request external resources. And this app has to be full screen. Is there way around using this tag to set the iPad to full screen mode on an html5 app?

Right now my requests are just being sent to another subdomain and they are all getting denied? Anyone have an idea on how to get around this? Allow jsonp and force fullscreen mode?

Answer 1

So the solution to this was tricky.

Using JSONP you bypass the need to worry about cross-domain issues. However, When you set <meta name="apple-mobile-web-app-capable" content="yes" /> you will NOT be able to send cross domain requests without specifying Access-Control-Allow-Origin in your headers.

So here is the solution:

Note: In both of these requests I am specifying &jsoncallback=?

DOESN'T WORK:

function jsonpRequest(req){
    $.getJSON(req,
      function(data) {
        // JSONP will run getJson() above;
    });
}

DOES WORK:

function jsonpRequest(req){
        $.ajax({
          url: req,
          dataType: 'json',
         beforeSend: setHeader,
          //data: data
          //success: callback
        });
        /*
        $.getJSON(req,
              function(data) {
                // JSONP will run getJson() above;
            });*/

    }
    function setHeader(xhr) {

     xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    } 

Answer 2

Not sure if you're doing this already but have you added "callback=?" in your query params?

Check out the dataType section here for more info: http://api.jquery.com/jQuery.ajax/