如何从父页面中调用iframe的JavaScript代码

在本文中，我们将看到如何从父页面中调用iframe的JavaScript代码，并通过示例了解它们的实现方式。任务是在父页面中定位一个iframe元素，并使用JavaScript访问/更改iframe的内容。在这里，JavaScript方法只能位于父页面中，但可以调用iframe中的方法并更改或更新iframe的内容。为此，将使用两个JavaScript属性：contentWindow和contentDocument，以便访问iframe的内容。

contentWindow和contentDocument属性可以以类似的方式使用，不过contentWindow属性将返回iframe元素的window对象，而contentDocument属性只会返回iframe元素的document对象。

contentWindow 属性 : contentWindow 属性返回 HTML iframe 元素的 Window 对象。您可以使用此 Window 对象访问 iframe 的文档和其内部 DOM。该属性是只读的，但它的属性可以像全局 Window 对象一样被操作。

语法:

iframeElement.contentWindow;

contentDocument 属性 : contentDocument 属性返回由 frame 或 iframe 元素生成的 Document 对象。此属性可由宿主窗口使用，以访问与 frame 或 iframe 元素关联的 Document 对象。

语法:

iframeElement.contentDocument;

我们也可以通过contentWindow属性获得文档对象。

语法: contentWindow属性的文档对象：

iframeElement.contentWindow.document;

上面的语法将返回文档对象。

方法1: 执行任务的步骤如下:

在父页面中创建一个Index.html页面。
创建一个iframe页面，并将该页面的路径赋给父页面中的iframe元素。
在body部分内定义按钮和iframe元素。
当点击按钮时，将调用javascript方法。
Javascript方法修改iframe的内容。

下图显示了从父页面调用iframe中的javascript代码的过程：

如何从父页面中调用iframe的JavaScript代码

示例1 ：在这个示例中，我们将使用 document.contentWindow属性 并调用JavaScript方法。

Index.html（父页面）

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Invoke javascript code in an iframe from parent page 
    </title> 
</head> 
  
<body> 
  
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Invoke javascript code in an iframe from parent page 
    </h3> 
    <h3>Parent Page</h3> 
  
    <button onclick="change_iframe_content()"> 
        Change Iframe_Content 
    </button><br><br><br> 
  
    <!-- iframe window -->
    <iframe id="frame" 
            src="./iframe_window.html" 
            frameborder="1"> 
    </iframe> 
  
    <script> 
        change_iframe_content = () => { 
            
            // contentWindow Property - Returns Window Object 
            const if_doc = document.getElementById("frame").contentWindow; 
          
            // Accessing document -> p -> Changing InnerHTML 
            if_doc.document.getElementsByTagName('p')[0].innerHTML = 
            "Write & Earn";   
        } 
    </script> 
</body> 
  
</html>

Iframe 页面:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Invoke javascript code in an iframe from parent page 
    </title> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Invoke javascript code in an iframe from parent page 
    </h3> 
    <h3>Iframe Page</h3> 
    <p>Contribute</p> 
</body> 
  
</html>

输出：

如何从父页面中调用iframe的JavaScript代码

方法2： 执行任务需要以下步骤：

在iframe的HTML源文件中定义一个

div>元素，并为其提供一个ID和onclick事件。
* 点击事件的方法只在iframe页面上编写。当调用此方法时，它将更改

div>元素的文本颜色。在这里，主要任务是对

div>元素执行点击事件，这样

如何从父页面中调用iframe的JavaScript代码

HTML

HTML

回顶部