记一次：iframe嵌套网页，利用window.postMessage()实现子父窗口相互传值

widuu 发布于2019-08-22 16:37 / 3585人阅读

摘要：通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议通常为，端口号为的默认值，以及主机两个页面的模数设置为相同的值时，这两个脚本才能相互通信。

场景需要：

http://a.com -父页面，记做A

http://b.com -子页面，记做B

B生成的DOM，获取其属性，传值到A

A监听事件，获取监听的属性，传到B

正文

利用window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

父页面 A

子页面 B

效果

本人不太会录屏，就上截图了

开始因为没获取的值，所以是undefined

云服务器 GPU云服务器子父传值记一次在阿里云搭建服务器记一次阿里云服务器集体中毒子父窗口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94518.html

关于跨域简单总结

摘要：开发者需要在中设置属性为跨域是的简称这是一种利用浏览器漏洞解决跨域的办法脚本元素可以不受浏览器同源策略的限制。什么是浏览器同源策略? 同源是指,域名,协议,端口号均相同,如图: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1虽然都指向本机,但也是跨域. 浏览器同源策略(...

learning 2019-08-22 16:45 评论0 收藏0
跨域那些事儿

摘要：什么是跨域我们先看下以下场景开启两个本地服务器，页面为，其中嵌套了，页面想使用页面的数据，例如调用它的方法，会报以下错误如图所示，，，译为协议主机和端口号必须符合，否则，就是跨域。跨域的几种常见方案同源策略的限制范围有以下几种和无法读取。什么是跨域我们先看下以下场景：开启两个本地服务器，页面A为localhost:9800，其中嵌套了iframeB localhost:9000，页...

nevermind 2019-08-21 15:01 评论0 收藏0
同源策略与跨域

摘要：简单地理解就是因为同源策略的限制，它是浏览器为了安全性考虑一种非常重要的策略，域名下的无法操作或是域名下的对象。同源策略会限制以下三种行为和无法读取。例如中可以引用等资源，此类操作不受同源策略限制。同源策略同源策略same origin policy中的重要内容就是URL（uniform resource locator）,统一资源定位符，俗称网址。URL中的resource资源就...

xavier 2019-08-26 12:09 评论0 收藏0
同源策略与JS跨域（JSONP , CORS）

摘要：由此可以看出，同源策略确实是必不可少的，那么它会带来哪些限制呢和无法读取。由于浏览器的同源策略，在网页端出现了这个跨域的问题，然而我们发现，所有的属性并没有受到相关的限制，比如等。本文按照政治问答题必备套路分为以下3个部分：为什么要跨域？跨域是什么？如何实现跨域？ Section1、为什么要跨域？自古以来（1995年起），为了用户的信息安全，浏览器就引入了同源策略。那么同...

Shisui 2019-08-21 15:52 评论0 收藏0