首页iframe.contentWindow 完整示例

iframe.contentWindow 完整示例

时间: 2023-07-17 07:57:09 浏览: 166

以下是一个使用 `iframe.contentWindow` 的完整示例： ```html <!DOCTYPE html> <html> <head> <title>Parent Page</title> </head> <body> <h1>Parent Page</h1> <button onclick="sendMessage()">Send Message</button> <iframe id="myIframe" src="child.html"></iframe> <script> function sendMessage() { const iframe = document.getElementById('myIframe'); const iframeWindow = iframe.contentWindow; iframeWindow.postMessage('Hello from parent!', '*'); } </script> </body> </html> ``` ```html  <!DOCTYPE html> <html> <head> <title>Child Page</title> <script> window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { if (event.origin !== 'http://localhost:8080') { return; } console.log('Message received from parent:', event.data); } </script> </head> <body> <h1>Child Page</h1> </body> </html> ``` 在这个示例中，父页面包含一个按钮和一个 `<iframe>` 元素。当点击按钮时，父页面会向嵌入的子页面发送消息。子页面监听 `message` 事件，当接收到来自父页面的消息时，在控制台打印出消息内容。请注意要将 `http://localhost:8080` 替换为实际运行的主页面的 URL，以确保跨域通信能够正常工作。这个示例演示了如何使用 `iframe.contentWindow` 在父页面和嵌入的子页面之间进行通信。你可以根据需要进行进一步的扩展和修改。

阅读全文