我們如何偵測網頁是否載入到 IFrame 內？

識別多用途網頁的iframe 載入

在Web 開發領域，區分在iframe 中載入的網頁和直接在iframe 中載入的網頁瀏覽器視窗通常是一項至關重要的任務。這對於旨在服務多種目的的應用程式尤其相關，例如在 Facebook 中呈現普通網站和畫布頁面。為了應對這項挑戰，我們探索了確定網頁載入環境的方法。

偵測 iframe 載入

要確定網頁是否在 iframe 中載入，我們可以利用視窗物件之間的差異。特別是， self 屬性表示目前窗口，而 top 屬性表示最外面的窗口或框架。如果這兩個視窗物件不相同，則表示網頁是在 iframe 中載入的。

程式碼實作

const inIframe = () => window.self !== window.top;

此函數傳回一個布林值，表示頁面是否載入到 iframe 內。 true 值表示 iframe 加載， false 值表示直接在瀏覽器視窗加載。

跨來源存取更新

瀏覽器安全措施可能會限制存取window.top 由於同源策略。為了解決這個問題，可以使用 try-catch 區塊：

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

在此更新版本中，透過假設 iframe 載入來處理因阻止存取 window.top 而導致的異常。

結論

透過了解視窗物件之間的差異，我們建立了可靠地偵測網頁是否在視窗內載入的方法。 iframe。這些知識使開發人員能夠創建根據載入環境調整其行為的應用程序，確保跨各種平台的無縫功能。

以上是我們如何偵測網頁是否載入到 IFrame 內？的詳細內容。更多資訊請關注PHP中文網其他相關文章！