【第016篇】使用iframe嵌入子页面，子页面传值给父页面

最新推荐文章于 2022-12-30 14:42:08 发布

VIP文章嘉&年华

最新推荐文章于 2022-12-30 14:42:08 发布

阅读量356

点赞数

分类专栏： # Vue和Element笔记 # JavaScript示例代码文章标签： javascript 前端 html vue

本文链接：https://blog.csdn.net/u011298909/article/details/127815756

版权

废话不说，直接上代码。
1、父页面代码，监听子页面消息：window.addEventListener

<template>
  <iframe v-if="iframeURL" :src="iframeURL" ref="iframe" width="100%" height="810" frameborder="0" scrolling="yes" @opened="handleOpened"></iframe>
</template>

<script>
import {
    addDynamicRoute } from '@/router'
export default {
   
  data () {
   
    return {
   
      iframeURL: null,
      menuId: '',
      href: '',
      iframeWin: {
   }
    }
  },
  mounted () {
   
    /** 监听子页面传递过来的消息 **/
    /** this.handleMessage，表示监听到消息后的处理事件 **/
    window.addEventListener('message', this.handleMessage)
  },
  created () {
   
    this.menuId = this.$route.meta.menuId || ''
    this.href = this.$route.params.href || ''
    this.init()
  },
  methods: {
   
    handleOpened