一、了解跨消息传输
1.跨消息传输的定义
它指的是将一个地方的数据传输到另一个地方。
2.语法
<iframe src=" 路径" frameborder="0"></iframe>
src里是要将消息传输到那个文件夹的路径。
3.绑定事件的方法:postMessage()方法
这个方法接收两个参数:第一个参数是一条消息;第二个参数是一个表示消息接收方来自哪个域的字符串,这个参数对保障安全通信非常重要,可以防止浏览器把消息发送到不安全的地方。
二、案例
这个案例有两个页面,分别是A1页面和B1页面。A1页面时发送消息的,B1页面是接受页面的。
1.先写有消息的A1页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨文档消息传输 A1页面</title>
<script>
window.onload=function(){
//获取按钮
var btn=document.querySelector('button');
//获取发送数据按钮
var sendBtn=document.querySelector('#send');
//给第一个按钮绑定事件
//给内联框架B1发送消息
var iframe=document.querySelector('#iframe');
iframe.onclick=function(){
//获取B1内联窗口,给B1发送消息
win=document.querySelector('iframe').contentWindow;
}
var win;
btn.onclick=function(){
//获取B1窗口
win=window.open("./25-B1.html")
}
//给发送数据按钮绑定事件
sendBtn.onclick=function(){
//发送的消息目标原
var obj={
//注意:这里一定是":",不是"="
name:'张三',
age:18
}
win.postMessage(obj)
}
}
</script>
</head>
<body>
<button>打开B1窗口</button>
<button id="send">发送数据</button>
<button id="iframe">获取内联框架B1,给B1发送消息</button>
<!-- 在A1页面上展现出B1页面 -->
<iframe src="./25-B1.html" frameborder="0"></iframe>
</body>
</html>
2.再写B1页面,来接收消息的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跨文档B1页面</title>
<style>
body{
background-color: cornflowerblue;
height: 400px;
}
</style>
<script>
window.onmessage=function(event){
//获取传输过来的数据
console.log(event.data);
//获取目标源
console.log(event.origin);
}
</script>
</head>
<body>
b的页面
</body>
</html>
3.得到A1的页面效果
A1页面发送消息,B1页面接受消息:这个案例写了两种方式:
1.第一种方式:
可以先点击打开B1窗口按钮,就会跳转到B1页面上,再回到A1页面上,点击“发送消息”按钮,回到B1页面的控制台,就会有A1页面发送来的消息。
2.第二个方式:
先点击“获取内联框架B1,给B1发送消息”按钮。
再点击“发送消息”按钮。
就会得到:
如果直接点击“发送数据”,而不获取B1页面时,是会出现错误。