html5中使用object标签完成页面之间的通信

在HTML5中，使用<object>标签可以嵌入其他网页作为一个对象，并且可以通过postMessage方法实现页面间的通信。

以下是一个简单的例子，演示如何使用<object>标签嵌入另一个页面，并通过postMessage进行通信：

主页面（main.html）:




<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
    <script>
        function sendMessageToIframe() {
            var iframe = document.getElementById('iframe');
            var message = document.getElementById('message').value;
            iframe.contentWindow.postMessage(message, '*');
        }
 
        window.onmessage = function(e) {
            console.log('Message received from iframe:', e.data);
        }
    </script>
</head>
<body>
    <input type="text" id="message" placeholder="Type a message">
    <button onclick="sendMessageToIframe()">Send Message</button>
    <object type="text/html" data="iframe.html" width="400" height="300" id="iframe"></object>
</body>
</html>

嵌入页面（iframe.html）:




<!DOCTYPE html>
<html>
<head>
    <title>Iframe Page</title>
    <script>
        window.onmessage = function(e) {
            console.log('Message received from main page:', e.data);
            var response = 'Response to ' + e.data;
            window.parent.postMessage(response, '*');
        }
    </script>
</head>
<body>
    <p>This is an iframe.</p>
</body>
</html>

在这个例子中，主页面（main.html）通过点击按钮触发sendMessageToIframe函数，该函数从文本框中获取消息并通过postMessage方法发送给嵌入的页面（iframe.html）。嵌入的页面监听到消息后，会在控制台输出接收到的消息，并且回复一个响应消息给主页面。主页面同样通过window.onmessage监听来自嵌入页面的消息，并在控制台输出接收到的消息。

注意：postMessage方法的第二个参数是一个字符串，表示目标文档的来源，在这个例子中使用'*'表示可以发送到任何域。在实际应用中，应该根据具体情况指定更具体的域名或协议。

html5中使用object标签完成页面之间的通信

评论已关闭

推荐阅读