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.

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

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.

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>

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')