43

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.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
Aron Woost
  • 19,268
  • 13
  • 43
  • 51

4 Answers4

67

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

Samuli Hakoniemi
  • 18,740
  • 1
  • 61
  • 74
  • But when i want to return value from the opened window then it is not working – Bhavik Ambani Aug 06 '12 at 10:51
  • 1
    @Napalm make sure to add a semi-colon at the end of the line `var dispatch = ...` – laker Oct 03 '12 at 21:42
  • 1
    Shouldn't it be `
    Google
    ` - Opening a `
    ` and closing it with a `` doesn't make much sense. And what's the `` at the end?
     – Timo Ernst Dec 14 '12 at 13:21
  • @valmar, you're right. This example contained typos, I fixed them. – Samuli Hakoniemi Dec 14 '12 at 23:10
  • doesn't work now? I tried in iphone5 UIWebView, after click, google page is opened in same view, not Safari. – LetBulletFlies Feb 20 '13 at 08:41
  • 1
    Does not work for me in the Facebook app browser. I did fix the semi-colon @laker. – Jeremy Haile Jul 15 '13 at 16:43
  • Excellent solution ... and then there was iOS 7 :( – Matt Rose Oct 17 '13 at 09:14
  • Does not work with links in Naver Line app. @chun are you able to share a demo link of it working in iOS7? – PassKit Jul 25 '14 at 03:48
  • 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. – ccsakuweb Jul 29 '14 at 08:42
  • 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! – rorypicko Oct 16 '14 at 11:34
  • You, dear sir, are a pure genius. May god bless you and your family. – Karan Mar 16 '15 at 11:37
  • It seems like this is not possible anymore as of iOS 8.3. Anyone else? – Jim Apr 20 '15 at 04:07
  • 1
    Tested in iOS 8.3 for a webpage saved to the home screen in webapp mode. Works. – Design by Adrian May 13 '15 at 13:50
  • Worked for me in iOS 8.3 from within a HTML5 full-screen standalone web app. Thanks! – JoLoCo Aug 04 '15 at 21:03
  • 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? – bkopp Nov 07 '15 at 21:34
  • It does not work for me in an iOS 9.2 standalone app. I have the feeling apple has a thing agains standalone apps. – Mark Dec 10 '15 at 12:04
  • 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. – Selirion Jan 20 '17 at 08:26
  • 5
    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. – Selirion Jan 24 '17 at 09:06
  • I could not make it work on instagram in app browser on ios, does anyone have a working example? – Agu V Feb 17 '17 at 19:32
  • 3
    This doesn't work for me in iOS 11. It just opens the link within the embedded UIWebView. – Axeva Oct 20 '17 at 21:40
  • Won't this just open the default browser? – Machado Oct 01 '18 at 18:20
  • 1
    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. – Ryan Oct 10 '19 at 15:30
9

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.

Aron Woost
  • 19,268
  • 13
  • 43
  • 51
2

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>
Roman Rhrn Nesterov
  • 3,538
  • 1
  • 28
  • 16
0

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')
Gary Vernon Grubb
  • 9,695
  • 1
  • 24
  • 27