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

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

Patricia Arquette
發布: 2024-12-03 15:00:22
原創
1006 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板