vue父页面给iframe子页面传值

简介: vue父页面给iframe子页面传值

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

vue:传值给子页面iframe

// 传值给子页面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事件,然后在事件处理程序中获取传递的数据:

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

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

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

相关文章
|
1天前
|
JavaScript
vue 监听 sessionStorage 中值的变化
vue 监听 sessionStorage 中值的变化
9 1
|
1天前
|
JavaScript 索引
Component name “index“ should always be multi-word vue/multi-word-component-names
Component name “index“ should always be multi-word vue/multi-word-component-names
|
1天前
|
JavaScript
vue 创建项目、运行项目、访问项目(vue2版)
vue 创建项目、运行项目、访问项目(vue2版)
6 0
|
1天前
|
JavaScript
|
1天前
|
JavaScript
Vue中data常见的写法:
Vue中data常见的写法:
|
1天前
|
Web App开发 JavaScript
vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking <some> event.
vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking <some> event.
5 0
|
1天前
|
JavaScript
vue v-for循环渲染动态ref表单校验的实现技巧
vue v-for循环渲染动态ref表单校验的实现技巧
5 0
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
1天前
|
JavaScript 编译器
|
1天前
|
JavaScript 前端开发 API