支持苹果移动网络应用程序的faq链接在safari开放

apple-mobile-web-app-capable faq links open in safari

本文关键字：链接 faq safari 开放 应用程序 苹果 移动 移动网 网络 支持      更新时间：2023-09-26

我花了大部分时间将移动web应用程序添加到我的网站中。现在一切正常-链接留在应用程序中，在safari中不打开，带有youtube嵌入视频的页面现在打开，但常见问题页面分割跳转链接仍然在safari打开。。。现在唯一这样做的。

我使用了下面的代码。

<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript">
    (function(document,navigator,standalone) {
        // prevents links from apps from oppening in mobile safari
        // this javascript must be the first script in your <head>
        if ((standalone in navigator) && navigator[standalone]) {
            var curnode, location=document.location, stop=/^(a|html)$/i;
            document.addEventListener('click', function(e) {
                curnode=e.target;
                while (!(stop).test(curnode.nodeName)) {
                    curnode=curnode.parentNode;
                }
                // Condidions to do this only on links to your own app
                // if you want all links, use if('href' in curnode) instead.
                if(
                    'href' in curnode && // is a link
                    (chref=curnode.href).replace(location.href,'').indexOf('#') && // is not an anchor
                    (   !(/^[a-z+.-]+:/i).test(chref) ||                       // either does not have a proper scheme (relative links)
                        chref.indexOf(location.protocol+'//'+location.host)===0 ) // or is in the same protocol and domain
                ) {
                    e.preventDefault();
                    location.href = curnode.href;
                }
            },false);
        }
    })(document,window.navigator,'standalone');
</script>

我的跳转链接代码是：

<span class="faq-link"><a href="#faq-1">Where are...?</a></span>

只要你点击顶部的问题，Safari就会打开。

TIA感谢您的帮助。

虽然这个问题是七年前提出的，但我认为它有很多观点。事实上，我发现自己在寻找一个解决方案，在Safari而不是应用程序中打开同一网站的链接页面。

我发现对我有效的解决方案不是在最初的问题中使用JavaScript函数，而是在页眉中包含一个指向清单文件的链接，并添加一个基本清单文件。

<LINK REL="manifest" HREF="Manifest.json">

清单文件看起来是这样的。。。

{
  "name": "A Long Site Name",
  "short_name": "A short name",
  "start_url": "yourWebSite.html",
  "prefer_related_applications": false,
  "display": "standalone",
  "background_color": "#a2c3cb",
  "icons": [{
    "src": "https://www.yourWebsite/apple-touch-icon-196x196.png",
    "sizes": "196x196",
    "type": "image/png"
  }]
}

然而，这并不能解决外部链接的问题。

相关文章：