iframe 父窗口和子窗口相互的调用方法集锦

2023年6月10日下午5:46 • JavaScript

当我们在网页中需要引用其他网页或第三方组件时，就可以使用iframe标签来嵌入其他页面。使用iframe标签可以让页面显得更加动态，同时也能添加一些新的功能。本文将详细讲解iframe父窗口和子窗口相互调用的方法。

iframe 的基本用法

在HTML中，使用iframe标签可以将一个网页嵌入到另一个网页中。例如：

<html>
    <head>
        <title>父页面</title>
    </head>
    <body>
        <h1>这是父页面</h1>
        <iframe src="http://www.example.com" width="100%" height="500"></iframe>
    </body>
</html>

以上代码将在父页面中插入一个宽度占100%、高度为500像素的iframe元素，并将其指向http://www.example.com。当用户打开这个父页面时，iframe元素会加载指向的网址。

父窗口调用子窗口

有时，我们希望父窗口能够控制子窗口中的内容，调用子窗口中的函数并更新子窗口中的内容。下面是实现这个功能的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
    <script type="text/javascript">
        // 该函数将在iframe中加载完成后被调用
        function onLoad() {
            // 获取iframe元素
            var myIFrame = document.getElementById('myiframe');
            // 调用iframe中的函数
            myIFrame.contentWindow.updatePage();
        }

        // 该函数将在iframe中的链接被点击时被调用
        function linkClicked() {
            // 获取iframe元素
            var myIFrame = document.getElementById('myiframe');
            // 修改iframe中的内容
            myIFrame.contentWindow.document.getElementById('content').innerHTML='您点击了该链接';
        }
    </script>
</head>
<body>
    <h1>父页面</h1>
    <iframe id="myiframe" src="test.html" onload="onLoad()" width="100%" height="400"></iframe>
    <br>
    <a href="javascript:;" onclick="linkClicked()">点击我修改子页面</a>
</body>
</html>

以上代码创建了一个父页面，其中包括一个iframe元素和一个链接。当用户点击链接时，该链接将调用linkClicked函数，该函数将获取iframe元素并更新其中的内容。

在onLoad函数中，我们通过getElementById()方法获取iframe元素，并调用其中的updatePage函数。当iframe元素中的网页加载完成时，会触发onload事件，然后自动调用onLoad函数。

在子页面test.html中，我们可以创建一个名为updatePage的函数，并在其中更新页面：

<!DOCTYPE html>
<html>
<head>
    <title>Sub Page</title>
    <script type="text/javascript">
        function updatePage() {
            var content = document.getElementById('content');  
            content.innerHTML = '子页面已更新';  
        }
    </script>
</head>
<body>
    <h1>子页面</h1>
    <div id="content">这是子页面默认显示的内容</div>
    <a href="#">这是一个链接</a>
</body>
</html>

当父页面的onLoad函数被调用时，myIFrame.contentWindow.updatePage()语句将调用子页面中的updatePage函数，从而修改子页面中的内容。

子窗口调用父窗口

在某些情况下，我们希望子页面能够调用父页面中的函数，例如，当用户在子页面中单击按钮时，应该调用父页面中的相关代码。下面是实现该功能的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
    <script type="text/javascript">
        function parentFunction() {
            alert('父页面的函数被调用');  
        }
    </script>
</head>
<body>
    <h1>父页面</h1>
    <iframe id="myiframe" src="test.html" width="100%" height="400"></iframe>
</body>
</html>

以上代码创建了一个父页面，其中包括一个iframe元素。在子页面中，我们可以使用parent对象来调用父页面中的函数：

<!DOCTYPE html>
<html>
<head>
    <title>Sub Page</title>
    <script type="text/javascript">
        function callParentFunction() {
            parent.parentFunction();
        }
    </script>
</head>
<body>
    <h1>子页面</h1>    
    <button onclick="callParentFunction()">点击此按钮，调用父页面函数</button>
</body>
</html>

以上代码创建了一个子页面，其中包括一个按钮。当用户单击该按钮时，将调用子页面中的callParentFunction函数，该函数将使用parent对象来调用父页面中的parentFunction函数。

以上就是关于iframe父窗口和子窗口相互调用的方法集锦。希望可以帮助大家理解和使用iframe标签。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：iframe 父窗口和子窗口相互的调用方法集锦 - Python技术站