js如何实现两个iframe之间传值 - web建站教程手机端

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，我们会在看到邮件的第一时间内为您处理！