nulinuli zainuli 2022-07-21 17:25 采纳率: 50%
浏览 125
已结题

iframe获取父页面message

问题遇到的现象和发生背景

使用postMessage无法在iframe子页面中无法监听到父页面的的message

问题相关代码,请勿粘贴截图

父级代码:

<script>

        $(function () {
            $('#bimshow').attr('src', 'http://localhost:12536/');
            $('#bimshow')[0].onload = function () {
                window.addEventListener("message", (event) => {
                    window.frames['bimshow'].postMessage({ token: "parent" }, "*");//给指定的iframe发送信息
                })
            }
        })

    </script>

iframe代码:在vue项目中 写在一个js文件中

window.parent.postMessage({}, "*");//触发父元素的监听事件
window.addEventListener("message", (event) => {
    //监听父元素的postMessage事件
    console.log(event.data)
    window.removeEventListener("message", () => { });//移除message监听事件,否则会成死循环;
})

运行结果及报错内容

{type: 'webpackOk', data: undefined}
data: undefined
type: "webpackOk"
[[Prototype]]: Object

我的解答思路和尝试过的方法
我想要达到的结果

获取到父页面的message

  • 写回答

1条回答 默认 最新

  • 123_木头人 2022-07-21 17:52
    关注

    你父级代码有问题,父级向子iframe发送数据,用的是 frame.contentWindow.postMessage,并且应该直接放到iframe.onload里的,不要再加一层window.addEventListener("message"

    父页面代码:

    img

    子页面代码:

    img

    执行后结果:

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 7月30日
  • 已采纳回答 7月22日
  • 创建了问题 7月21日

悬赏问题

  • ¥15 r语言蛋白组学相关问题
  • ¥15 Python时间序列如何拟合疏系数模型
  • ¥15 求学软件的前人们指明方向🥺
  • ¥50 如何增强飞上天的树莓派的热点信号强度,以使得笔记本可以在地面实现远程桌面连接
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控:网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 STM32驱动继电器