僅針對iPad開發網站-強制以應用程序模式打開所有鏈接

Question

我正在建立一個始終可以在iPad上瀏覽的小型網站，我使用的是meta標簽：

<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>

這會將我網站下的所有鏈接保留在“應用程序”中。

現在，這就是問題所在。

加載外部網頁的框架顯然將包含鏈接，當單擊框架中的這些鏈接時，這會觸發safari並脫離應用上下文，並且該應用將恢復到以前的行為。

有沒有一種方法可以確保網站上的所有鏈接都在“應用”中打開，即使是那些包含在<frame>元素中的鏈接也可以打開？

這里的總體目標是防止用戶突破應用程序而去做任何他們喜歡的事情

Answer 1

我知道您指出這是一個網站，但似乎您正在制作類似於應用程序的內容，因此我很想建議您使用phonegap。 http://phonegap.com/

原因是，您將無法阻止在Safari中打開鏈接。 盡管Brainfeeder建議將外部html加載到div中，這是一個很好的建議，但是當用戶單擊該div中來自外部站點的鏈接時，我仍然會遇到相同的問題。

使用phonegap，您所需要做的就是創建一個新項目，將代碼原樣轉儲到www文件夾中，並立即擁有一個可部署到iPad的應用程序。

但是讓我建議的主要是，這是一個名為inAppBrowser的功能，該功能可讓您指定要在前景Web視圖中打開的鏈接，這樣，當用戶完成查看后，他們只需單擊完成並返回到您的應用即可。 http://docs.phonegap.com/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser

僅僅為了解決safari問題，似乎有些開銷，但是可能值得考慮。