仅为iPad开发网站 - 强制所有链接在应用模式下打开

时间:2013-09-18 12:26:09

标签: javascript html ipad frame frameset

我正在建立一个小型网站,总是可以在iPad上查看,我正在使用元标记:

<meta name="apple-mobile-web-app-capable" content="yes">

将网站添加到主页以强制iPad将其视为应用。这消除了地址栏和后退按钮等......

我在网站内设置了网站,最初该网站会加载index.htm目标网页,其中包含指向包含<frameset><frame>的其他网页的链接。每个页面都有一个导航框和一个用于显示内容的框架。第二帧的内容将是外部网页。

我遇到了一个问题,即在应用模式下启动网站并点击着陆页中的链接会导致在Safari中打开一个新窗口 - 基本上它会突破应用程序上下文并加载Safari,我解决了这个:

<script type="text/javascript">
    $(document).ready(function () {
        $('a').click(function (e) {
            window.location = $(this).attr('href');
            e.preventDefault();
        });
    });
</script>

这会将我网站下的所有链接都加载到“app”中。

现在,问题在于此。

加载外部网页的框架显然会包含链接,当点击框架中的这些链接时,这会启动Safari并突破应用程序上下文,应用程序将返回到之前的行为。

有没有办法确保网站上的所有链接在'app'中打开,即使是<frame>元素中包含的那些?

此处的总体目标是防止用户突破应用并在网上做任何他们喜欢的事情

1 个答案:

答案 0 :(得分:0)

我知道你说它是一个网站,但看起来你正在制作一个类似应用程序的东西,我很想建议使用phonegap。 http://phonegap.com/

原因是,你无法阻止在safari中打开链接。虽然Brainfeeder在将外部html加载到div中时提出了一个很好的建议,但我认为当用户点击该div内外部网站的链接时,你仍然会遇到同样的问题。

使用phonegap所有你需要做的就是创建一个新项目,将代码原样转储到www文件夹中,然后你就可以将一个应用程序部署到你的iPad上。

但是让我建议的主要内容是一个名为inAppBrowser的功能,它允许您指定在前台webview中打开的链接,这样当用户完成查看时,他们只需单击“完成”并返回到您的应用程序。 http://docs.phonegap.com/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

欣赏它似乎只是为了解决Safari问题的一些开销,但可能值得考虑。