首頁  >  文章  >  web前端  >  如何從 JavaScript 封裝的子框架中存取和操作父 iframe?

如何從 JavaScript 封裝的子框架中存取和操作父 iframe?

Barbara Streisand
Barbara Streisand原創
2024-11-06 07:47:02116瀏覽

How can I access and manipulate the parent iframe from within a JavaScript-encapsulated child frame?

從 JavaScript 存取父級 iframe

iframe 封裝在 Web 應用程式中,充當嵌入內容的獨立容器。然而,從父 iframe 存取資訊可能是一個挑戰。這篇部落格文章探討了透過 JavaScript 存取父 iframe 並操作其內容的方法。

問題陳述

我們有一個場景,頁面上存在多個動態產生的 iframe。每個 iframe 載入一個相同的頁面。我們的目標是以編程方式關閉特定的 iframe。為此,我們需要從載入的頁面中識別父 iframe。

要存取父iframe,我們可以使用下列方法:

  1. 指派名稱和ID 屬性:為iframe 及其父級指定相同的名稱和ID。這使我們能夠在兩個上下文中唯一地識別 iframe。
<iframe>
  1. 使用JavaScript 存取: 在載入的子頁面中,使用下列JavaScript 程式碼來擷取父iframe:
parent.document.getElementById(window.name);

此程式碼會檢索ID 與子頁面name 屬性相符的iframe 元素,我們將其設定為與其父頁面相同。

使用此程式碼方法,您現在可以根據需要操作父 iframe,例如關閉它或更改其內容。

以上是如何從 JavaScript 封裝的子框架中存取和操作父 iframe?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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