vue项目关于iframe嵌套的相关问题总结(一)

vue项目关于iframe嵌套的相关问题总结(一)

因为最近做的项目涉及到项目跨项目共用页面，也就是iframe嵌套，之前对着一块也不是很了解，所以想把遇到的问题及解决办法总结一下。可能会有不严谨或者理解不周到的地方，希望读到文章的大佬能够发指出。
首先，说一下项目的需求吧，A系统要调用B系统的某个页面，并且要实现相关指定功能，具体步骤及需求如下：

• 在 A系统创建对应嵌套页面的路由：

        {
          path: 'MXFXYZGL_FXSJ',
          name: 'MXFXYZGL_FXSJ',
          component: resolve => require(['@/components/YJYP/YJ/MXFXYZ/FXSJ'], resolve)
        },

• 创建对应的嵌套页面：

<template lang="html">
  <div class="">
    <iframe name="myiframe"  id="myrame-record-query"  :src="url"  frameborder="0" align="middle"  width="100%"  height="700px"></iframe>
  </div>
</template>
<script>
export default {
  data(){
    return{url:''}
  },
  mounted() {
  	// 对应的B项目的某个被嵌套页面的具体路由地址
    this.url = 'http://xxx:8080/dist/#/ModelManagement?turn=true' 
  },
}
</script>

以上，就能将B项目的某个具体页面嵌套到A项目，但是在嵌套的同时A项目又增加了几项新的功能，如下：

• 在B项目中的被嵌套页面的详情页要添加一个新的按钮，这个按钮只有在A项目嵌套B项目的时候才能出现，并且点击这个按钮要跳转到对应A页面的某个已创建好的页面（此页面不是嵌套进来的页面），而且要带具体参数在跳转的同时完成页面渲染。

  上面代码的url后面拼接了一个‘turn=true’ 这就是给url加了一个特定的参数 如果是由A项目进入的B项目 则根据此值进行判断按钮的显示与隐藏。

// 按钮添加如下：
<el-button  type="primary" size="mini" round  style="margin-top:10px"  v-if="window1" @click="ryhxFnc">人员画像</el-button>
export default{
	data(){window1:false,},
	mounted(){
	    if(this.$route.query.url.includes('turn')){
	      this.window1=this.$route.query.url.includes('turn')
	    }
	},
	methods:{
	    ryhxFnc(){
	     // 会在所有页面脚本执行完毕之后向目标窗口发送一个messageEvent消息
	     // 当点击人员画像这个按钮的时候会向A项目的对应嵌套页面发送messageEvent消息并且传参
	     // 子传父  
	     window.parent.postMessage({zjhm:this.basicData.passNo,gjdq:this.basicData.nationality}, '*') //*号可以指定任意域名
	   },
	}
}

// 对应的A项目的嵌套页面
  // 对应的此父级就能利用监听函数监听到该动作
  window.addEventListener('message',(ev)=>{
    // 在这里可以打印一下ev  ev中的data属性是子级传的参数
    var data = ev.data
    this.$router.push({name:'RYHX_XQ',query:data})
  })