前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue父页面给iframe子页面传值

vue父页面给iframe子页面传值

作者头像
王小婷
发布2023-08-11 15:56:05
1K0
发布2023-08-11 15:56:05
举报
文章被收录于专栏:编程微刊编程微刊

在vue父页面有两个个参数 名称和图标,需要把这两个参数传到iframe的地图里面,在地图触发绘点事件的时候,获取到传来的参数并且展示

vue:传值给子页面iframe

代码语言:javascript
复制
// 传值给子页面iframe(2个参数)
            handleIframeLoad() {
                const iframeWindow = this.$refs.myIframe.contentWindow;
                const data = {
                    imgUrl: this.imgUrl,
                    name: this.name,
                };
                iframeWindow.postMessage(data, '*');
            },

iframe接收父页面的值 在iframe中,使用window.addEventListener监听message事件,然后在事件处理程序中获取传递的数据:

代码语言:javascript
复制
<!-- iframe.html -->
<script>
// 监听来自vue父页面的消息
window.addEventListener('message', function(event) {
  const data = event.data;
  // 在这里处理接收到的消息
  console.log('Received message from parent:', data);
});
</script>

当父页面中的按钮被点击时,会将值传递给子页面的iframe元素。子页面通过监听message事件获取传递的值,并进行相应的处理。

这种方法需要父页面和子页面在同一个域名下,否则会因为浏览器的同源策略而导致通信失败。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-08-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档