js如何实现两个iframe之间传值

792 ℃

js如何实现两个iframe之间传值,下面web建站小编给大家详细介绍一下具体实现代码!

父组件传参

<template>
  <view>
    <iframe :src="`/demoA?$[params]`"></iframe>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        params: ''
      };
    },
    mounted() {
      const params = {
        name: 'web建站',
        age: '3',
      }
      this.params = encodeURIComponent(JSON.stringify(params))
      window.addEventListener('message', this.handleMessage)
    },
    methods: {
      handleMessage(event) {
        console.log(event, '事件') 
        if(event.data.status === 'ok') {
          console.log(event.data.params, '参数值')
        }
      }
    }
  }
</script>

子组件接收参数

<template>
  <view>
    <p>demoA发来的参数:{{params}}</p>
    <button @click="sendMess">发送数据</button>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        params: ''
      };
    },
    created() {
      const params = JSON.parse(decodeURIComponent(window.location.hash.split('?')[1]))
      this.params = params
    },
    methods: {
      sendMess() {
        window.parent.postMessage({
          status: 'ok',
          params: {
            id: 12
          }
        }, '*');
      }
    }
  }
</script>

iframe开发admin后台

js通过attachEvent判断iframe是否加载完成

用iframe里面的关闭按钮关闭iframe弹窗

iframe框架调用高度自适应方法

标签: iframe, iframe传参

上面是“js如何实现两个iframe之间传值”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_3659.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

Trae:新一代免费的AI编程工具
js如何利用window.postMessage传参、取参
织梦DEDECMS模板全站动态浏览怎么实现
帝国CMS前台申请友情链接插件下载
帝国CMS7.0多值字段在内容页模板的调用方法
wordpress如何在二级目录建站(小编亲测有效)