首頁 >web前端 >js教程 >如何使用純 JavaScript 取得 iFrame 的內容?

如何使用純 JavaScript 取得 iFrame 的內容?

Patricia Arquette
Patricia Arquette原創
2024-12-03 15:00:221094瀏覽

How to Get the Content of an iFrame Using Pure JavaScript?

使用純 JavaScript 取得 iFrame 的正文內容

JavaScript 可以操作目前 HTML 文件中的元素。但是,檢索 iframe 的內容需要不同的方法。本文遵循 jQuery 框架所使用的方法,提供了純 JavaScript 的全面解決方案。

取得iFrame 元素

首先,使用其識別目標iframe ID 或CSS 選擇器:

var iframe = document.getElementById('id_description_iframe');

訪問者:

訪問>訪問🎜>
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

現在,要訪問iframe的內容,您可以利用 jQuery 使用的解決方案:

在 Internet Explorer 中,使用 contentWindow 屬性,而其他瀏覽器則偏好 contentDocument。此 OR 條件可確保相容性。

在iFrame 中選擇元素

var iframeContent = iframeDocument.getElementById('frameBody');

透過存取iframe 文檔,您可以使用常用方法選擇特定元素:

調用函數並存取變數

var iframeWindow = iframe.contentWindow;

// Call global functions
var myVar = iframeWindow.myFunction(param1 /*, ... */);

要與iframe 的JavaScript 上下文中定義的函數和變數進行交互,請訪問其視窗元素:

注意事項

請注意,所有這些操作都需要遵守同源策略。如果需要跨網域訪問,則需要採取具體措施,例如修改Content-Security-Policy header。

以上是如何使用純 JavaScript 取得 iFrame 的內容?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn