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

时间:2011-02-18 00:52:01

标签: html ios web-applications homescreen

我正在使用快速登录页面访问同一服务器上的许多小型移动优化应用程序。基本上是仪表板模式。我希望在我的主屏幕上显示它,以便我可以在全屏模式下访问任何应用程序,而不是在工具栏重的移动Safari中。但是,当我点击链接时,它会将我从全屏模式带到Safari中 - 这正是我不想要的。

是否有办法(例如使用锚点target属性)在导航到其他页面时保持全屏模式?或者我应该把所有内容都扔进<iframe>

2 个答案:

答案 0 :(得分:5)

您需要使用一些javascript拦截onclick事件。例如,以下是iWebKitnoeffect标记应用<a> 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;
                };
            }
        }
    }
};

答案 1 :(得分:3)

每当移动版Safari中出现onclick时,Safari都会将其从全屏模式中移除。表单提交将保持全屏模式,无论是POST还是GET。如果通过javascript设置window.location,它也将保持全屏模式。

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

$(window).click(handleClick);

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