web-dev-qa-db-ja.com

JavaScriptを使用してWebアプリからモバイルサファリでリンクを強制的に開く

IOS Webアプリでwindow.open()を呼び出すと、モバイルサファリではなくWebアプリでページが開きます。

モバイルサファリでWebページを強制的に開くにはどうすればよいですか?

注:ストレート<a href>リンクはオプションではありません。

35
Aron Woost

これは可能です。 iOS5スタンドアロンWebアプリでテスト済み:

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

ここでテストできます: http://www.hakoniemi.net/labs/linkkitesti.html

63
zvona

JavaScript window.open()を使用してiOS WebアプリをエスケープするのはNOT POSSIBLEです。リンクをモバイルサファリで開く場合は、<a href>リンク。

9
Aron Woost

Vueの実装。お役に立てば幸いです。

<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>
1

別のサブドメインを使用するか、httpsの代わりにhttpを使用する場合、window.open()を使用して、iOSに強制的にサファリのPWAからリンクを開くことができます。

例えば、take example.com

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

注:ブラウザで開くと、サーバーはhttpをhttpsにリダイレクトします。したがって、セキュリティ上の懸念はありません。

(または)

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