当前位置:首页 > 技术文档 > 正文内容

vue配置iframe父级窗口通信

admin2年前 (2023-02-07)技术文档145

在router/index.js中配置


export default new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: '/',
      name: 'index',
      component: resolve => require(['@/views/index'], resolve),
      meta: {
        keepAlive: true, // 此组件需要被缓存
        isIframe: true // 标记是否是iframe
      }
    }
  ]
})


在入口文件main.js中配置


// 判断当前路由是否需要iframe
router.beforeEach((to, from, next) => {
  if (to.meta.isIframe) {
    window.parent.postMessage({
      type: 'setIframeHeight',
      height: document.documentElement.scrollHeight
    }, '*')
  }
  next()
})


在父页面中添加


<script>
  window.addEventListener('message', function (e) {
    if (e.data.type === 'setIframeHeight') {
      document.querySelector('#iframe').height = e.data.height
    }
  })
</script>



分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/322.html

分享给朋友:

“vue配置iframe父级窗口通信” 的相关文章

Win8重装及恢复系统方法

Win8重装及恢复系统方法

Win8重装及恢复系统方法  win8正式版已经发布了一段时间,大家纷纷进行试用,如果操作系统出现问题了怎么办,我们该怎么进行恢复呢?本文就教大家如何重装及恢复win8系统。        首先,我们从屏幕右侧的Charm条进入“更改电脑设置”选项。在“常...

安卓刷机教程

 安卓手机刷机教程,体验不一样的新系统。    一:刷机准备与介绍  首先简单介绍下刷机吧,所谓的刷机,不纯指刷新的系统,其中还包括刷Recovery(也叫CWM或者工程模式),基带(你可以理解为电脑驱动 类),ROM(系统哦),SPL(你...

如何自己手工获取自己的Access Token

如何自己手工获取自己的Access Token

在使用WP2PCS前,你需要了解,WP2PCS目前只支持百度网盘,(将来将支持360网盘和腾讯微云,这要看它们的API什么时候开放, 且容易开发)是基于百度PCS的API开发的,和坊间流传的抓取百度网盘文件直链不同,WP2PCS从百度网盘获取文件的源(二进制流),是百度许可并鼓 励开发者使用的接...

php检查用户名是否符合规定

<?php   /**  * 检查用户名是否符合规定 (两个字符以上,只能有中文,字母,数字,下划线的)  *  * @param STRING $username 要检查的用户名...

php无限分类-总结

//php代码部分  <?php         header('Content-Type:text/html;charset=utf-8');    ...

Zend Studio 8打开utf-8文件出现乱码解决方法

Zend Studio 8打开utf-8文件出现乱码解决方法

今天安装了zend studio 8.0.1,运行了一个PHP程序项目(项目文件编码为utf-8),发现utf-8文件中的中文全部变成乱码了,后面终于经过寻找探索,找到了问题所 在:虽然你的项目是UTF-8编码文件,但是当通过zend studio工具运行打开时,是以工具里设定的GBK编码...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。