iframe嵌套网页使用window.postMessage()跨域通信

文章目录

• • 1. 什么是跨域
  • 2. postMessage()语法
  • 3. demo
  • • 3.1 子窗口 一> 父窗口传递信息
    • 3.2 父窗口 一> 子窗口传递信息

1. 什么是跨域

• 跨域，指的是浏览器不能执行其他网站的脚本。
• 它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
• 所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域。
• 举几个例子：

地址1	地址2	协议	域名	端口	是否跨域
http://web.a.com/index.html	http://web.a.com/page.html	相同	相同	相同	否
http:// web.a.com /index.html	http:// web.b.com /page.html	相同	不同	相同	是
http://web.a.com: 8080 /index	http://web.a.com: 8081 /index	相同	相同	不同	是
http : //web.a.com/index.html	https : //web.a.com/page.html	不同	相同	相同	是

2. postMessage()语法

• otherWindow

  其他窗口的一个引用，写的是你要通信的window对象。

  例如在

  iframe

  中向父窗口传递数据时，可以写成

  window.parent.postMessage()

  ，

  window.parent

  表示父窗口。

• message

  需要传递的数据，字符串或者对象都可以，对象需要序列化（

  JSON.parse()

  ），详细用法请转到：https://blog.csdn.net/github_38336924/article/details/96423264

• targetOrigin

  表示目标窗口的源，协议+域名+端口号，如果设置为“

  *

  ”，则表示可以传递给任意窗口。

// 可以传递给任意窗口
window.parent.postMessage('hello world','*');
           

在发送消息的时候，如果目标窗口的协议、域名或端口这三者的任意一项不匹配

targetOrigin

提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。

// 只有父窗口为 http://web.a.com/index.html 接收到消息 
window.parent.postMessage('hello world','http://web.a.com/index.html');
           

• 发送消息

• 接收消息

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event.data)  //event.data为传递过来的数据
    console.log(event.origin)  //event.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
    console.log(event.source)  //event.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
}
           

3. demo

3.1 子窗口 一> 父窗口传递信息

• 子窗口 code

//子页面向父级页面传递信息
window.onload = function() {
    window.parent.postMessage({  //与父级页面通讯方法
    type: "onload",              //父级接收的信息 
    data："do something"         //如果传递的信息为object（数组或者json格式）需要转换成字符串
  }, '*');
}
 
 
//子页面接收信息 与父页面接收信息相同
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event);
}
           

• 父窗口 code

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event);
}
           

3.2 父窗口 一> 子窗口传递信息

• 父窗口 code

// 父页面向子页面传递信息 contentWindow.postMessage方法与window.postMessage相似
var iframe=document.getElementById("iframe");
iframe.contentWindow.postMessage({
    type: "set",
    content："hello world"
}, "*");

//父页面接收信息 与子页面接收信息相同
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event);
}
           

• 子窗口 code

// 子页面接收信息
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
	console.log(event);
}