首頁 > web前端 > js教程 > 如何從父頁面存取 iFrame 中的 JavaScript 函數?

如何從父頁面存取 iFrame 中的 JavaScript 函數?

Susan Sarandon
發布: 2024-12-23 21:52:20
原創
141 人瀏覽過

How Can I Access JavaScript Functions in an iFrame from the Parent Page?

從父頁存取 iFrame 中的 JavaScript 程式碼

從父頁呼叫嵌​​入 iFrame 中的 JavaScript 程式碼可能是個常見的挑戰。雖然從 iFrame 內與父頁面互動的能力很簡單,但從父頁面存取 iFrame 中定義的函數需要不同的方法。

解決方案:

要實現此目的,您可以利用以下技術:

  1. 識別iFrame 的ID和函數名稱:
    確保您的iFrame 具有唯一ID,並且您要呼叫的函數具有特定名稱。
  2. 取得內容視窗:
    使用 document.getElementById() 方法,透過 ID 定位特定 iFrame 並擷取其contentWindow屬性:

    const contentWindow = document.getElementById('iFrameID').contentWindow;
    登入後複製
  3. 呼叫函數:
    取得iFrame 的內容視窗後,您可以透過呼叫以下函數來呼叫所需的函數:

    contentWindow.functionName();
    登入後複製

例如,如果您的iFrame 的ID是「targetFrame」且您要呼叫的函數是targetFunction(),您可以使用:

document.getElementById('targetFrame').contentWindow.targetFunction();
登入後複製

替代方法:

或者,您可以存取內容使用window.frames 的iFrame 視窗:

 // This option may not work in the latest versions of Chrome and Firefox.
window.frames[0].frameElement.contentWindow.targetFunction();
登入後複製

以上是如何從父頁面存取 iFrame 中的 JavaScript 函數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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