如何檢測外框是否已在單頁應用程序中加載？

Question

我正在創建一個包含3個部分的單頁網絡應用：

• 標頭
• 導航側欄
• 用於顯示主頁內容的i框架

頁眉和側邊欄永遠不要在第一頁加載后重新加載-只有i框架。 我正在使用History API（即pushstate）來處理歷史記錄和導航。

我遇到的問題是，如果有人直接在網站中的任何頁面上鍵入URL，我想加載標題和側欄，然后加載他們在i框架中訪問的頁面。 如果他們已經在頁面上並單擊指向其他頁面的鏈接，我只希望它在i框架中加載新頁面。 我想做到這一點而又不會弄亂導航歷史。

如何檢測到此並適當加載內容？

Answer 1

在iframe中，您將使用一小段Javascript來查看window.parent和window.top，如下所示：

iframe中的Javascript

if (window.parent == window.top) {
  // user loaded the iframe, go to parent 
  window.location = "<your parent url>" + "?iframe=" + window.location;
}

然后在父級加載$_GET['inframe']指示的iframe：

父級中的PHP

if (isset($_GET['inframe']) {
   loadIframe($_GET['inframe']);
}

由於沒有提供任何代碼，因此我在其中組成了loadIframe()函數，因此必須將其替換為自己的代碼。

出於安全原因，您可能需要使用filter_input（）過濾輸入：

父級中的PHP

if (isset($_GET['inframe']) {
   loadIframe(filter_input(INPUT_GET, 'inframe'], FILTER_VALIDATE_URL);
}

並進行進一步檢查。 這樣一來，您可以防止人們使用iframe參數在您的代碼中注入惡意內容，或者僅加載他們喜歡的任何iframe。

您可以使用AJAX代替iframe加載內容，並完全避免此問題。 但是，iframe允許使用更傳統的方式來加載內容。