Fatal编程技术网
  • safari/
  • 阻止脱机iphone webapp在Safari中打开链接

阻止脱机iphone webapp在Safari中打开链接

safari web-applications

阻止脱机iphone webapp在Safari中打开链接,safari,web-applications,offline,offline-mode,offline-caching,Safari,Web Applications,Offline,Offline Mode,Offline Caching,我正在开发一个网站，可以在离线模式下使用mobile safari。我可以将其书签到主屏幕并从那里加载。但是，一旦从主屏幕打开，单击某些链接将跳出应用程序并在mobile safari中打开–尽管我在所有链接单击上都使用了preventDefault（） 应用程序在级别绑定onclick事件处理程序。使用事件委派，它捕获任何链接上的任何点击，查看其href（例如“help”或“review”），并动态调用javascript模板并更新页面。事件处理程序在事件对象上调用preventDefault

我正在开发一个网站，可以在离线模式下使用mobile safari。我可以将其书签到主屏幕并从那里加载。但是，一旦从主屏幕打开，单击某些链接将跳出应用程序并在mobile safari中打开–尽管我在所有链接单击上都使用了preventDefault（）

应用程序在
级别绑定onclick事件处理程序。使用事件委派，它捕获任何链接上的任何点击，查看其href（例如“help”或“review”），并动态调用javascript模板并更新页面。事件处理程序在事件对象上调用preventDefault（）——对于一些这样做的链接，页面将使用模板输出进行更新。但是，对于在输出模板结果之前导致本地数据库受损的链接，这些链接将在mobile safari中打开

在桌面safari中，所有的链接即使在我离线时也能正常工作，这是移动safari特有的

你有没有想过为什么有些链接可以脱机工作，而其他链接却不能？清单文件中没有列出任何有问题的链接URL，但它们不（不应该）需要列出，因为链接操作被阻止

还有一些额外的奇怪之处： *一旦我点击MobileSafari中加载的链接，即使我离线，这些链接现在也能正常工作，并且用数据库中的数据填充的模板也能正常工作。换句话说：当从主屏幕打开链接时，链接会失败，而不是从mobile safari离线中打开
*更改链接以删除数据库命中（使用模拟数据库结果填充模板）解决了此问题，并且可以从主屏幕在应用程序中单击链接。

我使其正常工作，问题是由于事件处理程序代码中的一个看不见的错误（与停止跟踪链接无关）。如果将click events的事件处理程序绑定到body标记，并调用preventDefault（），则不会跟随该链接，mobile safari也不会打开，并且您可以根据该链接url定义自己的更新页面逻辑

您应该确保在可能发生任何错误之前调用了preventDefault（）——在我的例子中，问题是在调用preventDefault（）之前，事件处理程序中发生了一个错误，但是我当然无法在控制台中看到该错误，因为链接已经被跟踪

下面是我正在使用的代码（它假设DOM标准事件，在IE中会失败）：

您可能需要查看以下内容：

//由https://github.com/irae
（功能（文档、导航器、独立）{
//防止来自应用程序的链接在mobile safari中出现
//此javascript必须是您的应用程序中的第一个脚本
if（（导航器中的独立）和&navigator[独立]）{
var curnode，location=document.location，stop=/^（a | html）$/i；
document.addEventListener（'click'，函数（e）{
curnode=e.target；
while（！（停止）.test（curnode.nodeName））{
curnode=curnode.parentNode；
}
//有条件仅在指向您自己应用程序的链接上执行此操作
//如果需要所有链接，请改用if（'href'在curnode中）。
if（'href'位于curnode&&（curnode.href.indexOf（'http'）| | ~curnode.href.indexOf（location.host）））{
e、 预防默认值（）；
location.href=curnode.href；
}
}，假）；
}
})（文档，window.navigator，'standalone'）；

bodyOnClickHandler = function(e) {
    var target = e.target;
    if (target.tagName == 'A') {
        e.preventDefault();
        var targetUrl = target.getAttribute("href");
        //show the page for targetUrl
    }
}

// by https://github.com/irae
(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 && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
                e.preventDefault();
                location.href = curnode.href;
            }
        },false);
    }
})(document,window.navigator,'standalone');