解決ios系統在safari瀏覽器中添加web應用程序到主屏幕，打開子鏈接會跳轉到safari的問題

解決ios系統在safari瀏覽器中添加web應用程序到主屏幕，打開子鏈接會跳轉到safari的問題

前言

ios系統的safari瀏覽器有一個功能可以將web應用程序添加到主程序，使得web程序像app一樣全屏顯示操作。

代碼

<!-- 在 `head` 標籤中添加描述 `html` 元數據的標籤。表示允許該應用以全屏運行 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 添加腳本 -->
<script>
  if (('standalone' in window.navigator) && window.navigator.standalone) {
    var noddy, remotes = false;
    document.addEventListener('click', function (event) {
      noddy = event.target;
      while (noddy.nodeName !== 'A' && noddy.nodeName !== 'HTML') noddy = noddy.parentNode;
      if ('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !==
          -1 || remotes)) {
        event.preventDefault();
        document.location.href = noddy.href;
      }
    }, false);
  }
</script>

1. 添加 meta 標籤後，web應用 會在主屏幕上以全屏顯示，然當點擊子鏈接時，依然會跳轉到 safari 瀏覽器。

示例如下：
https://harmsworth.github.io/webapp-demo/2019/06/test3.html

2. 添加 meta 標籤並且添加上面的 js 腳本能全屏顯示，當點擊子鏈接時，會在 web應用 內跳轉。

示例如下:
https://harmsworth.github.io/webapp-demo/2019/06/test5.html

參考

https://www.cnblogs.com/PeunZhang/p/3407453.html#meta
https://blog.csdn.net/lilinoscar/article/details/70270374
https://cloud.tencent.com/developer/article/1025378