问题
如何才能使两个甚至多个不同域的系统在一个页面进行通信呢？
在工作中，老板交给我一个任务，他需要2个甚至多个不同域的系统集成在一个页面上，并进行信息的交换与传递，找了很多资料，最终发现可以通过这个方法简单来实现
跨文档消息传递
指的是在不同域的页面间传递消息，例如在http://www.xxx.com域中的某个页面中与其内嵌框架中的http://www.yyy.com域中 页面进行通信。XDM 的核心是 postMessage()方法。其作用是向另一个地方传递数据，‘‘另一个地方’’指的是包含在当前页面中的<iframe>元素。
postMessage()方法接收两个参数：一条消息和消息接收方地址字符串。第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。
var iframe = document.getElementById("myFrame")
iframe.postMessage("hello, postMessage", "http://www.yyy.com")
iframe内嵌里面的页面接收到XDM消息时，会触发window对象的message事件，这个事件以异步的形式触发，执行时，可能会延迟。触发message事件后，事件对象包含以下2个重要信息：
- data: 作为postMessage()第一个参数传入的字符串数据
- origin：发送消息的文档所在域
在http://www.yyy.com域中的页面进行监听
window.addEventListener('message', function (event) {
// 确保发送消息的域是已知的域
if(event.origin === "http://www.xxx.com") {
handler(event.data) // 处理数据'hello, postMessage'
}
})
实例演示
假如这个页面是http://www.xxx.com域中的某个页面(请根据实际情况命名，这里只是用作演示之用)
<!DOCTYPE html>
<html>
<head>
<title>Cross Document Messaging Example</title>
</head>
<body>
<div id="status"></div>
<div>
<input type="text" id="message" size="40"><input type="button" id="btn" value="Send to iframe">
</div>
<iframe width="400" height="300" id="inner" src="http://www.yyy.com"></iframe>
<script>
//注册message事件,接收来至http://www.yyy.com的信息
window.addEventListener('message', function (event)) {
var status = document.getElementById("status");
if(event.origin == "http://www.yyy.com") {
status.innerHTML = "iframe said: " + event.data;
}
});
//从http://www.xxx.com发送消息
document.getElementById("btn").onclick = function (evnet) {
var message = document.getElementById("message").value,
innerWindow = document.getElementById("inner").contentWindow;
if (innerWindow.postMessage){
innerWindow.postMessage(message, "http://www.yyy.com");
} else {
alert("Your browser doesn't support Cross Document Messaging.");
}
});
</script>
</body>
</html>
假设以下这个页面是http://www.yyy.com的某个页面(是www.xxx.com的内嵌页面)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="status"></div>
<div>
<input type="text" id="message" size="40"><input type="button" id="btn" value="Send to parent">
</div>
<script>
//注册message事件,接收来至"http://www.xxx.com"的信息
window.addEventListener("message", function (event) {
var status = document.getElementById("status");
if(event.origin == "http://www.xxx.com"){
status.innerHTML = "parent said: " + event.data;
}
});
// 发送消息
document.getElementById("btn").onclick = function (event) {
var message = document.getElementById("message").value
if (parent.postMessage){
parent.postMessage(message, "http://www.xxx.com")
} else {
alert("Your browser doesn't support Cross Document Messaging.");
}
});
</script>
</body>
</html>
网页效果展示：
向内嵌页面发送数据
内嵌页面向父页面发送数据
网友评论