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

本文介绍了如何在跨域的iframe中利用window.postMessage()进行父窗口与子窗口之间的通信。通过示例代码展示A页面(父页面)和B页面(子页面)如何监听和传递DOM属性,实现安全的跨源通信。
摘要由CSDN通过智能技术生成

 

文章已移动至此地址


**场景需要:**
http://a.com -父页面,记做A http://b.com -子页面,记做B
B生成的DOM,获取DOM的属性,传到A
A监听事件,获取监听的属性,传到B
## 正文 ##
利用window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机  (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。
#### 父页面 A ####
```vue
<template>
    <div>
        <iframe 
         :src="iframesrc" 
         id="a-page"></iframe>
    </div>
</template>

<script>
export default {
    computed:{
       

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值