如何存取 iFrame 內的元素？

從 iFrame 檢索元素

存取 iFrame 中的元素通常會為 Web 開發帶來挑戰。然而，了解背後的機制可以讓您有效地導覽和操作 iFrame 內容。

解決方案

要從 iFrame 取得元素，您需要先擷取 iFrame 的元素內容文件物件。這可以使用 iframe.contentDocument 或 iframe.contentWindow.document 屬性來實現。

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

簡化版本為：

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

此程式碼擷取第一個有效的內部文件。取得後，您可以像造訪目前頁面上的元素一樣存取 iFrame 的內部結構。

跨來源注意事項

需要注意的是存取 iFrame 內容時適用跨域限制。如果 iFrame 與目前頁面不在同一網域中，您可能會遇到存取限制。這稱為同源策略，可確保資料安全。

參考文獻

• MDN:
  
  • MDN: iframe>腳本
    
• MDN：同源策略：跨來源腳本 API 存取

以上是如何存取 iFrame 內的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！