从父页面调用iframe中的JavaScript代码的方法-牛翰网

基本概念与作用说明

基本概念

iframe 是 HTML 中的一个标签，用于在当前页面中嵌入另一个完整的 HTML 页面。iframe 具有自己的独立文档对象模型（DOM），因此可以独立于主页面进行渲染和交互。

作用说明

内容隔离：iframe 可以将嵌入的内容与主页面隔离开来，避免样式和脚本的冲突。
动态加载：通过 iframe 可以动态加载外部资源，提高页面的加载速度和用户体验。
跨域通信：虽然默认情况下，不同域的 iframe 和主页面之间不能直接通信，但可以通过 postMessage API 实现跨域通信。

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

示例一：直接调用 iframe 中的函数

假设我们在 iframe 中定义了一个函数 sayHello，我们可以在父页面中直接调用这个函数。

iframe 内容 (iframe.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Content</title>
    <script>
        function sayHello() {
            console.log('Hello from iframe!');
        }
    </script>
</head>
<body>
    <h1>Iframe Content</h1>
</body>
</html>

父页面内容 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <iframe id="myIframe" src="iframe.html" style="width: 100%; height: 300px;"></iframe>
    <button onclick="callIframeFunction()">Call Iframe Function</button>

    <script>
        function callIframeFunction() {
            // 获取 iframe 对象
            const iframe = document.getElementById('myIframe');
            // 调用 iframe 中的函数
            iframe.contentWindow.sayHello();
        }
    </script>
</body>
</html>

示例二：通过事件监听器调用 iframe 中的函数

有时候，我们可能需要在特定事件触发时调用 iframe 中的函数。例如，当用户点击按钮时调用 iframe 中的函数。

iframe 内容 (iframe.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Content</title>
    <script>
        function sayHello() {
            console.log('Hello from iframe!');
        }

        window.addEventListener('message', function(event) {
            if (event.data === 'callSayHello') {
                sayHello();
            }
        });
    </script>
</head>
<body>
    <h1>Iframe Content</h1>
</body>
</html>

父页面内容 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <iframe id="myIframe" src="iframe.html" style="width: 100%; height: 300px;"></iframe>
    <button onclick="callIframeFunction()">Call Iframe Function</button>

    <script>
        function callIframeFunction() {
            // 获取 iframe 对象
            const iframe = document.getElementById('myIframe');
            // 发送消息给 iframe
            iframe.contentWindow.postMessage('callSayHello', '*');
        }
    </script>
</body>
</html>

示例三：跨域调用 iframe 中的函数

当 iframe 和父页面位于不同的域名时，直接调用 iframe 中的函数会受到同源策略的限制。这时可以使用 postMessage API 进行跨域通信。

iframe 内容 (iframe.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Content</title>
    <script>
        function sayHello() {
            console.log('Hello from iframe!');
        }

        window.addEventListener('message', function(event) {
            if (event.origin !== 'https://example.com') return; // 验证消息来源
            if (event.data === 'callSayHello') {
                sayHello();
            }
        });
    </script>
</head>
<body>
    <h1>Iframe Content</h1>
</body>
</html>

父页面内容 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <iframe id="myIframe" src="https://example.com/iframe.html" style="width: 100%; height: 300px;"></iframe>
    <button onclick="callIframeFunction()">Call Iframe Function</button>

    <script>
        function callIframeFunction() {
            // 获取 iframe 对象
            const iframe = document.getElementById('myIframe');
            // 发送消息给 iframe
            iframe.contentWindow.postMessage('callSayHello', 'https://example.com');
        }
    </script>
</body>
</html>

示例四：从 iframe 调用父页面中的函数

除了从父页面调用 iframe 中的函数，我们也可以从 iframe 中调用父页面中的函数。这同样可以通过 postMessage API 实现。

iframe 内容 (iframe.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Content</title>
    <script>
        function callParentFunction() {
            window.parent.postMessage('callParentFunction', 'https://example.com');
        }

        window.addEventListener('message', function(event) {
            if (event.origin !== 'https://example.com') return; // 验证消息来源
            if (event.data === 'responseFromParent') {
                console.log('Response received from parent');
            }
        });
    </script>
</head>
<body>
    <button onclick="callParentFunction()">Call Parent Function</button>
</body>
</html>

父页面内容 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
    <script>
        function parentFunction() {
            console.log('Function called in parent page');
            // 向 iframe 发送响应
            window.frames['myIframe'].postMessage('responseFromParent', 'https://example.com');
        }

        window.addEventListener('message', function(event) {
            if (event.origin !== 'https://example.com') return; // 验证消息来源
            if (event.data === 'callParentFunction') {
                parentFunction();
            }
        });
    </script>
</head>
<body>
    <iframe id="myIframe" src="https://example.com/iframe.html" style="width: 100%; height: 300px;"></iframe>
</body>
</html>

示例五：动态创建和插入 iframe

有时候，我们可能需要在运行时动态创建和插入 iframe，并调用其中的函数。

父页面内容 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <button onclick="createAndCallIframe()">Create and Call Iframe Function</button>

    <script>
        function createAndCallIframe() {
            // 创建 iframe
            const iframe = document.createElement('iframe');
            iframe.id = 'dynamicIframe';
            iframe.src = 'iframe.html';
            iframe.style.width = '100%';
            iframe.style.height = '300px';

            // 将 iframe 插入到页面中
            document.body.appendChild(iframe);

            // 监听 iframe 的 load 事件
            iframe.onload = function() {
                // 调用 iframe 中的函数
                iframe.contentWindow.sayHello();
            };
        }
    </script>
</body>
</html>