防止离线 iphone webapp 在 Safari 中打开链接答案

【问题标题】：Prevent offline iphone webapp from opening link in Safari防止离线 iphone webapp 在 Safari 中打开链接
【发布时间】：2009-12-19 17:30:16
【问题描述】：

我正在开发一个可以在离线模式下与移动 Safari 一起使用的网站。我可以将其添加到主屏幕并从那里加载。但是，一旦从主屏幕打开，点击某些链接会跳出应用程序并在移动 safari 中打开——尽管我在所有链接点击时都阻止了 Default()！

应用程序在<body> 级别绑定了一个 onclick 事件处理程序。使用事件委托，它捕获对任何链接的任何点击，查看其href（例如'help' 或'review'），并动态调用javascript 模板并更新页面。事件处理程序在事件对象上调用 preventDefault() - 对于一些的链接，这是可行的，并且页面会使用模板输出进行更新。但是，对于在输出模板结果之前导致本地数据库命中的链接，这些链接会在移动 safari 中打开。

在桌面 safari 中，即使我处于离线状态，所有链接也能正常工作 - 正在发生一些特定于移动 safari 的事情。

对于为什么某些链接可以离线工作，而其他链接不行的任何想法？清单文件中没有列出任何有问题的链接 URL，但它们不需要（不应该）列出，因为链接操作被阻止。

一些额外的怪事： * 一旦我点击一个加载到移动 Safari 中的链接，即使我处于离线状态，这些相同的链接现在也可以正常工作，并且填充了数据库中数据的模板可以正常工作。换句话说：链接在从主屏幕打开时失败，但不是从移动 safari 离线 * 更改链接以删除数据库命中（使用模拟数据库结果填充模板）解决了问题，并且可以从主屏幕在应用程序中单击链接。

【问题讨论】：

标签： safari web-applications offline offline-mode offline-caching

【解决方案1】：

你可能想看看这个：https://gist.github.com/1042026

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

【讨论】：

【解决方案2】：

我让它工作了，问题是由于事件处理程序代码中的一个看不见的错误（与阻止链接被跟踪无关）。如果您将点击事件的事件处理程序绑定到 body 标签，并调用 preventDefault()，则链接将不会被跟踪并且移动 safari 将不会打开，您可以定义自己的逻辑来根据该链接 url 更新页面.

您应该确保在可能发生任何错误之前调用 preventDefault() - 我的问题是在调用 preventDefault() 之前事件处理程序中发生了错误，但我当然看不到控制台中出现该错误，因为该链接已被点击。

这是我正在使用的代码（它假定 DOM 标准事件并且在 IE 中会失败）：

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

【讨论】：