vue进阶 Iframe基础-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue进阶 Iframe基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Iframe

获取iframe里面的内容

Iframe 注意事项

vue页面使用iframe

iframe 与 vue 直接的交互

vue 向 iframe 传值

iframe 向 vue 传值

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 传过来的值文章来源地址https://www.toymoban.com/news/detail-489390.html

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

到了这里，关于vue进阶 Iframe基础的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！