Force link to open in mobile safari from a web app with javascript

Question

When calling window.open() in a iOS web app, the page opens in the web app instead of mobile safari.

How can I force the webpage to open in mobile safari?

Note: Using straight <a href> links is not an option.

Jerrelljerri

You mean the <a href="stackoverflow.com" target="_blank">Go to SO</a> doesn't work? – Hellenist

Answer 1

This is possible. Tested with iOS5 stand-alone web app:

HTML:

<div id="foz" data-href="http://www.google.fi">Google</div>

JavaScript:

document.getElementById("foz").addEventListener("click", function(evt) {
    var a = document.createElement('a');
    a.setAttribute("href", this.getAttribute("data-href"));
    a.setAttribute("target", "_blank");

    var dispatch = document.createEvent("HTMLEvents");
    dispatch.initEvent("click", true, true);
    a.dispatchEvent(dispatch);
}, false);

Can be tested here: http://www.hakoniemi.net/labs/linkkitesti.html

Illaffected

But when i want to return value from the opened window then it is not working – Cynical

@Napalm make sure to add a semi-colon at the end of the line var dispatch = ... – Bailment

Shouldn't it be <div id="foz" data-href="http://www.google.fi">Google</div> - Opening a <div> and closing it with a </a> doesn't make much sense. And what's the </li> at the end? – Insectile

@valmar, you're right. This example contained typos, I fixed them. – Illaffected

doesn't work now? I tried in iphone5 UIWebView, after click, google page is opened in same view, not Safari. – Kone

Does not work for me in the Facebook app browser. I did fix the semi-colon @laker. – Alphaalphabet

Excellent solution ... and then there was iOS 7 :( – Dissipation

Does not work with links in Naver Line app. @chun are you able to share a demo link of it working in iOS7? – Selfidentity

It does not work when the initial event is not a click. For example after a change of a selector, depending of the option selected open a link. – Necessarily

This works on ios 6, 7 and 8, all android that i've tested (around 6 devices on varying os's), and desktop browsers (chrome,firefox,ie,safari,opera) (when this code is fired from within another touch/click event) (useful for canvas games) when your site is loaded within the facebook mobile app, changing the target to a.setAttribute("target", FB.UA.nativeApp() ? "_self" : "_blank"); makes the links work, albeit _self! providing you have he facebook javascript included! – Proto

You, dear sir, are a pure genius. May god bless you and your family. – Opec

It seems like this is not possible anymore as of iOS 8.3. Anyone else? – Bozen

Tested in iOS 8.3 for a webpage saved to the home screen in webapp mode. Works. – Acetate

Worked for me in iOS 8.3 from within a HTML5 full-screen standalone web app. Thanks! – Allies

This only seems to work when going to google.com. Facebook, stack overflow, etc. all open within the gmail app, instead of opening a new safari window. Am I missing something? – Wife

It does not work for me in an iOS 9.2 standalone app. I have the feeling apple has a thing agains standalone apps. – Astomatous

It works when I've add event listener to div that in document like in example. But when I've try to call this code just from javascript (e.g. on click on webgl button) - it fails to open anything. – Verile

To my prev comment: iOS 10.1, example works OK, but when I've try to call it from click on webgl button instead of div - nothing happends. To solve it just remove "a.setAttribute("target", "_blank");" and use a.dispatchEvent(new MouseEvent("click", {'view': window, 'bubbles': true, 'cancelable': true}););. And it opens a new safari window. Absolutely don't know why target=_blank is unnecessary in this case. – Verile

I could not make it work on instagram in app browser on ios, does anyone have a working example? – Kowal

This doesn't work for me in iOS 11. It just opens the link within the embedded UIWebView. – Takishatakken

Won't this just open the default browser? – Ditter

I was hopeful because of all the upvotes, but this didn't work for my scenario. If I'm browsing my website from within the iOS Facebook app and I click a link written like this, it still just opens within Facebook's browser instead of Safari. – Mortality

Answer 2

Turns out it is NOT POSSIBLE to escape the iOS web app with a JavaScript window.open(). If you want a link to open in mobile safari you have to use <a href> links.

Jerrelljerri

care to elaborate? i'd like to have an <a href> link to open safari from chrome / opera on ios – Linchpin

Answer 3

Vue implementation. Hope will helpful.

<template>
<div @click='handler()'>{{ text }}</div>
</template>

<script>
export default {
  props: {
    href: String,
    text: String,
  },
  methods: {
    handler() {
      const a = document.createElement('a')
      a.setAttribute('href', this.href)
      a.dispatchEvent(new MouseEvent("click", {'view': window, 'bubbles': true, 'cancelable': true}))
    }
  }
}
</script>

Nihility

Answer 4

You can force iOS to open a link from PWA in safari using window.open() provided you either use a different sub-domain or use http instead of https.

For example for take example.com

window.open('http://example.com','_blank')

Note: My server will redirect http to https once opened in the browser. So there is no security concern.

(or)

window.open('api.example.com','_blank')

Valenti