首页html页面里嵌入外部页面，并监听外部页面

html页面里嵌入外部页面，并监听外部页面

时间: 2024-05-05 11:16:43 浏览: 102

嵌入外部页面可以使用iframe标签，设置src属性为外部页面的URL。监听外部页面可以使用postMessage方法，其用于在两个窗口之间安全地传递字符串数据。在外部页面中使用postMessage方法发送消息，然后在嵌入的页面中添加一个监听事件，以便接收并处理外部页面发送的消息。以下是一个示例代码：外部页面： ```html <!DOCTYPE html> <html> <head> <script> function sendMessage() { var message = "Hello from external page!"; var iframe = document.getElementById("my-iframe"); iframe.contentWindow.postMessage(message, "*"); } </script> </head> <body> <button onclick="sendMessage()">Send Message</button> </body> </html> ``` 嵌入页面： ```html <!DOCTYPE html> <html> <head> <script> window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { if (event.origin !== "http://external-page.com") { return; } var message = event.data; alert("Received message: " + message); } </script> </head> <body> <iframe id="my-iframe" src="http://external-page.com"></iframe> </body> </html> ``` 在嵌入页面中，我们使用window.addEventListener方法来添加一个message事件监听器。在事件处理程序中，我们首先检查消息的来源是否是我们信任的外部页面，然后从event.data中获取消息的内容，并在弹出窗口中显示。

阅读全文