在 iOS 全屏 Web 应用程序中使用链接答案

【问题标题】：Using Links in iOS Fullscreen Web Apps在 iOS 全屏 Web 应用程序中使用链接
【发布时间】：2011-03-26 06:20:56
【问题描述】：

我正在开发一个快速登录页面，以访问同一服务器上的许多小型移动优化应用程序。基本上是仪表板模式。我想把它放在我的主屏幕上，这样我就可以在全屏模式下访问任何应用程序，而不是在工具栏繁重的移动 Safari 中。然而，当我点击一个链接时，它会将我从全屏模式带入 Safari——这正是我不想要的。

有没有办法（例如，使用锚点的 target 属性）在导航到不同页面时保持全屏模式？还是我应该把所有东西都扔进<iframe>？

【问题讨论】：

标签： html ios web-applications homescreen

【解决方案1】：

您需要使用一些 javascript 拦截 onclick 事件。例如，下面是 iWebKit 对应用于 <a> 标签的 noeffect css 类所做的：

window.onload = function () {
    function fullscreen() {
        var a = document.getElementsByTagName("a");
        for (var i = 0; i < a.length;i++) {
            if (a[i].className.match("noeffect")) {
                // Does nothing
            }
            else {
                a[i].onclick = function () {
                    window.location = this.getAttribute("href");
                    return false;
                };
            }
        }
    }
};

【讨论】：

是的，我不久前就想到了这一点。但是谢谢你的回答！很高兴把它放在那里。我对框架、表单和事件做了更多的实验，所以我也应该把这些结果放在这里。

【解决方案2】：

只要移动版 Safari 中出现onclick，Safari 就会将其退出全屏模式。无论POST 还是GET，表单提交都将保持全屏模式。如果 window.location 是通过 javascript 设置的，它也将保持全屏模式。

我更喜欢委托而不是在每个锚点上设置一个事件处理程序。这是一个 jQuery 示例：

$(window).click(handleClick);

function handleClick(e) {
    var target = $(e.target).closest('a');
    if( target ) {
        e.preventDefault();
        window.location = target.attr('href');
    }
}

【讨论】：

+1 委派比遍历所有锚点并手动为每个锚点添加事件侦听器更有效、更简洁且可重用。