Links will not open in iframe target in an iOS standalone web app

Question

I am running into a pickle. When I view my web app within mobile safari via iOS 6, I am able to successfully open up my basic target links <a href="link.html" target="mainframe"into my retrospective iframe <iframe src="http://www.linkexample.org/" name="mainframe"></iframe>

Though when the app is opened via standalone all the links exit out of the app and into Mobile Safari. You can see a working example at http://lacitilop.com/m2

Anyone have any suggestions on how to fix this?

Answer 1

You'll need to write some javascript to change the src of the iframe.

For a start, get your app working so that links will not open Safari by using something like the following (it's using jquery by the way):

if (window.navigator.standalone) {

    $(document).on(
        "click",
        "a",
        function (event) {
    
            event.preventDefault();
    
            var aurl = $(event.target).attr("href");
            if (aurl) {
                location.href = $(event.target).attr("href");
            }
            else {
                location.href = this;
            }
        }
    );
}

then you'll need to modify it to work with iframes too.

For more iphone app stuff you'll want to look at this:

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html