Open external page from iPhone web app using JavaScript?

2
votes

I've built a mobile website - a web site optimized for handheld units. If you are using an iPhone you launch Safari and go to the site URL to use this web app. It can also be run as an iPhone web app by adding it to your home screen. So it's not a native iPhone app - it's a mobile web page.

If you choose to run this mobile web page as an iPhone web app (by adding it to your home screen) you are not in the normal Safari interface. If the user clicks a link to an external site, you leave the web app and the link is opened in Safari. If you on the other hand use JavaScript to change the location, the link is opened in the web app - not in Safari.

Now I'm looking for a way to open a link in Safari from an iPhone web app using JavaScript. I've tried window.location.href but since it's JavaScript you stay in the web app.

Thanks in advance!

2
javascripthyperlinkiphone-web-appiphone-standalone-web-app
Here's an example where a user wants to do the opposite of what I'm trying to do: open all links in the web app: stackoverflow.com/questions/2898740/… – tkahn
It's too early and I don't have time to put together a test case, so I won't make this an answer, but have you tried window.open? – Quentin
Yes, I've tried that. The result is that nothing happens. – tkahn

2 Answers

0
votes

I'm also struggling with this. I have defaulted to using basic HTML when opening an external link, instead of Javascript – this appears to force it to open in another browser. I simply write a div with the link inside it, either using Javascript or static in the .html file.

An example of my implementation, check the "about" pages for offsite links written in HTML: http://4drillsbrewery.com/tools

(Please don't judge the code, it was all just a toy written to get used to Dashcode, not as a programming project! thanks). I'll be following this thread, hoping someone has a better way.

0
votes

I appreciate this isn't going to help in all scenarios BUT PROVIDED the javascript code originates from a user generated click of a hyperlink there is this solution...

$("a.someHyperLink").click(function () {
    var url = doJavascriptStuffToGenerateTheDynamicUrl();
    $(this).prop("href", url);
    return true; // return true so the click propagates and the new href is followed
});

You could extend this further so that it works both when the site is being browsed in Safari normally and as a standalone app.

$("a.someHyperLink").click(function () {
    var url = doJavascriptStuffToGenerateTheDynamicUrl();
    if (window.navigator.standalone) {
        // We are within the context of an iPhone standalone/fullscreen/homescreen app
        // Change the href and return true so that we leave the standalone app and the URL is opened in a new window in Safari
        $(this).prop("href", url);
        return true;
    } else {
        // Website is open in a browser normally
        // Open the URl in a new browser window
        window.open(url);
        return false; // Return false so the href isn't followed
    }
});