vue进阶 Iframe基础

Iframe

Iframe 在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。

获取iframe里面的内容

iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象

Iframe 注意事项

1 使用 iframe 后，window.location.href 将拿不到导航栏信息，也无法监听和计算属性

2 可以使用 ** parent.location.href ** 或者 document.referrer 拿到最外层导航栏信息，但是无法进行监听和计算属性

vue页面使用iframe

template 引入

  <Iframe :src="iframeSrc" width="100%"  height="100%"  ref="iframe" />

iframe 路径 建议写在 mounted 中，可以设置路径和参数

 onMounted(() => {
      iframeSrc.value = `/sheet/send? 
      full=true&id=${uuid}&instance_plan_id=${instance_plan_id}`;
    });

iframe 与 vue 直接的交互

vue 向 iframe 传值

vue 页面

 const mapFrame = this.$refs['iframe'];
 const iframeWin = mapFrame.contentWindow;
 iframeWin.postMessage(
   {
     value: 'backSuccess',
     id: 'vue',
     success: true
    },
   '*'
 );

iframe 接受 vue 的值 建议写在 mounted 和 created 中

window.addEventListener('message',e=>{
  console.log(e，'vue 传递过来的数据')  
})

iframe 向 vue 传值

iframe 页面

window.parent.postMessage(obj, '*');
//如果js外面还有一层js，
window.parent.window.parent.postMessage(obj, '*');

vue 监听 iframe 传过来的值

 mounted() {
    //   获取并监听iframe传递来的数据
    let that = this;
    window.addEventListener('message', function (e) {
      var res = e.data;
      console.log(res, 'iframe传递过来的数据');
      })
 }