Question

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />     

$('#btn-fb-share').click(function() {
        $('#btn-fb-share').attr("disabled", "disabled");
        window.open(url,"Mywindow","location=yes,menubar=yes");
    });

On my Ipad (Where i made a Shortcut to the Website on the Home-Screen) the link does not open in a new Window (Safari). How can i solve this? On my PC the link opens correctly in a new Window.

EDIT: I’ll try to explain it clearer.

What is happening: My Web-App open’s the url in the same Window like my app.

What should happen is: The Facebook page opens in a new Tab in safari. (I can demonstrate this if i open my site over safari and not over my web app.)

I hope you can see the difference now. I need to open my Link in Safari in a new Tab. But right now it keeps open it in my Window, where I dont have “return Button”.

The only difference between the two pictures is. The first picture is the Website saved on my Homescreen. The second picture is the Website opened directly in Safari.

Answer 1

Did a Google search and found this thread on macrumors.com with the same question that explains:

For links that I want to open within the WebApp and not open in Safari, I use this:

<a onclick="parent.location='http://url.com/page.html'">Link</a>

For links that I want to open in Safari, I use the standard HTML link:

<a href="http://url.com/another_page.html">Link</a>

So I did another Google search and found how to detect if you’re using iOS in JavaScript: http://forrst.com/posts/JavaScript_iOS_Detection-Ofa

Here’s my solution:

var url = "http://www.google.com/";

// Get the user agent string
var deviceAgent = navigator.userAgent;
// Set var to iOS device name or null
var ios = deviceAgent.toLowerCase().match(/(iphone|ipod|ipad)/);

$('#btn-fb-share').click(function() {

    if (ios) {
        // This is the line that matters
        $(this).attr('href', url);
    } else {
        // Your code that works for desktop browsers
        $('#btn-fb-share').attr("disabled", "disabled");
        window.open(url,2789432749274249,"location=yes,menubar=yes");
    }
});

I tested it in Chrome on a desktop, and on iOS from Safari and via a Home Screen WebApp. Here is a link to my working test: http://flackend.com/other/ios-test/

Note that you need to set the link’s target to _blank for it to open in a new tab in Safari on iOS (not from a WebApp instance, if you opened it in the Safari app). You can set that directly in your HTML markup or do it with jQuery using attr.