在IFrame中使用postMessage跨域

Posted 2023-03-09

参考技术A 我们在前端页面开发中，常常会用到iframe。
而且我们在使用iframe的时候，大多数情况下不单单只是为了显示页面，还要与父窗口进行交互，这时候就出现了跨域问题，iframe页面并不能直接操作父窗口的元素。
我们可以使用html5的postMessage()解决这个问题。

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

只有父窗口是 http://a.123.com:8080 时才会接受到传递的消息。