web通信之跨文档通信 postMessage

Posted 芬芬是个乖宝宝

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web通信之跨文档通信 postMessage相关的知识，希望对你有一定的参考价值。

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web通信之跨文档通信</title>
<style>
iframe {float:left;width:45%; height:200px; border:1px solid #333;}
</style>
</head>
<body>
<div id="main">
    <h1>web通信之跨文档通信</h1>
    <iframe src="iframe1.html"></iframe>
    <iframe src="iframe2.html"></iframe>
</div>
</body>
</html>

 

iframe1.html

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试iframe</title>
</head>
<body>
<div>
    <form>
        <input type="text"  placeholder="随便写点什么"/>
        <input type="submit" value="确认" />       
    </form>
</div>
<script>
var eleForm = document.querySelector("form");
eleForm.onsubmit = function() {
    var message = document.querySelector("input[type=\'text\']").value;
    window.parent.frames[1].postMessage(message, \'*\');
    return false;    
}
</script>
</body>
</html>

 

iframe2

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试iframe</title>
<style>
</style>
</head>
<body>
<div id="message">
    尚未接受到信息。
</div>
<script>
var eleBox = document.querySelector("#message");
var messageHandle = function(e) {
    eleBox.innerHTML = \'接受到的信息是：\' + e.data;
};
window.addEventListener("message", messageHandle, false);
</script>
</body>
</html>

 

以上是关于web通信之跨文档通信 postMessage的主要内容，如果未能解决你的问题，请参考以下文章

第1826期HTML5 之跨域通讯（postMessage）

docker之跨主机通信

React Native原理之跨端通信机制

Web Worker && postMessage && onMessage 使用教程

window.postMessage解决跨域

跨域通信--Window.postMessage()