判斷網(wǎng)頁是否在 iframe 中的簡易 JavaScript 代碼

以下是一個簡單的 JavaScript 代碼片段，用于檢查窗口是否在 iframe 中。對于某些可能使用頁面地址欄中 URL 的函數(shù)非常有用。代碼如下：

var isInIframe = (window.location != window.parent.location) ? true : false;

相關(guān)閱讀：

• 獲取注入 iframe 的源 href
• 如何重新加載 iframe

關(guān)于 jQuery 和 iframe 的常見問題 (FAQ)

如何使用 jQuery 檢查網(wǎng)頁是否加載在 iframe 內(nèi)？

要使用 jQuery 檢查網(wǎng)頁是否加載在 iframe 內(nèi)，可以使用 window.self 和 window.top 屬性。如果網(wǎng)頁加載在 iframe 內(nèi)，window.self 將不等于 window.top。以下是一個簡單的代碼片段：

if (window.self !== window.top) {
  // 網(wǎng)頁在 iframe 內(nèi)
} else {
  // 網(wǎng)頁不在 iframe 內(nèi)
}

JavaScript 中 window.self 和 window.top 有什么區(qū)別？

在 JavaScript 中，window.self 指的是當(dāng)前窗口，而 window.top 指的是窗口層次結(jié)構(gòu)中最頂層的窗口。如果網(wǎng)頁直接在瀏覽器中加載，window.self 和 window.top 將相同。但是，如果網(wǎng)頁加載在 iframe 內(nèi)，window.self 將指 iframe 窗口，而 window.top 將指主瀏覽器窗口。

我可以使用 jQuery 操作 iframe 內(nèi)的內(nèi)容嗎？

是的，您可以使用 jQuery 操作 iframe 內(nèi)的內(nèi)容。但是，由于同源策略，只有當(dāng) iframe 和父文檔來自同一域時，才能這樣做。以下是如何更改 iframe 內(nèi) body 標(biāo)簽 HTML 的示例：

$("#myIframe").contents().find("body").html("Hello, World!");

如何使用純 JavaScript 檢測 iframe，無需 jQuery？

您可以通過比較 window.self 和 window.top 來使用純 JavaScript 檢測 iframe，這與 jQuery 方法類似。方法如下：

if (window.self !== window.top) {
  // 網(wǎng)頁在 iframe 內(nèi)
} else {
  // 網(wǎng)頁不在 iframe 內(nèi)
}

什么是同源策略，它如何影響 iframe？

同源策略是 Web 瀏覽器中實現(xiàn)的安全功能，用于防止來自不同域的腳本相互交互。此策略會影響 iframe，因為它會阻止父文檔中的腳本訪問或操作 iframe 內(nèi)的內(nèi)容（如果它們不是來自同一域）。

我可以繞過同源策略來訪問來自不同域的 iframe 嗎？

由于安全原因，通常不建議繞過同源策略。但是，如果您控制父文檔和 iframe 內(nèi)容，則可以使用 document.domain 屬性或 postMessage 方法在兩者之間進(jìn)行通信。

如何使用 postMessage 方法在 iframe 和父文檔之間進(jìn)行通信？

postMessage 方法允許您在窗口之間發(fā)送數(shù)據(jù)，即使它們不是來自同一域。以下是如何使用它的示例：

var isInIframe = (window.location != window.parent.location) ? true : false;

我可以在所有瀏覽器中使用 jQuery 檢測網(wǎng)頁是否加載在 iframe 內(nèi)嗎？

是的，比較 window.self 和 window.top 的方法適用于所有現(xiàn)代瀏覽器，包括 Chrome、Firefox、Safari 和 Edge。

我可以使用 jQuery 在 iframe 中加載網(wǎng)頁嗎？

是的，您可以使用 jQuery 中的 attr 方法來設(shè)置 iframe 的 src 屬性，從而在 iframe 中加載網(wǎng)頁。示例如下：

if (window.self !== window.top) {
  // 網(wǎng)頁在 iframe 內(nèi)
} else {
  // 網(wǎng)頁不在 iframe 內(nèi)
}

我可以使用 jQuery 根據(jù)其內(nèi)容調(diào)整 iframe 的大小嗎？

是的，您可以使用 jQuery 根據(jù)其內(nèi)容調(diào)整 iframe 的大小。但是，由于同源策略，只有當(dāng) iframe 和父文檔來自同一域時，才能這樣做。示例如下：

$("#myIframe").contents().find("body").html("Hello, World!");

以上是jQuery檢查窗口是否在iframe中的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！