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

vue配置iframe父级窗口通信

admin3年前 (2023-02-07)技术文档163

在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父级窗口通信” 的相关文章

php 判断手机访问

//手机来访 function is_mobile() {     $user_agent = $_SERVER['HTTP_USER_AGENT'];    &n...

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

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

wamp下虚拟主机的配置

1  编辑httpd.conf,查找Include conf/extra/httpd-vhosts.conf,把前面注释符号“#”删掉。 2  编辑httpd-vhosts.conf,我把WAMPServer安装在D:/wamp,所以我这里的路径是D:\wamp\Apache2\...

Discuz!二次开发必备知识——DZ程序文件目录含义

分类: DZ程序文件目录含义基于7.0的标准程序,部分与插件无关的文件不作说明文件颜色说明:红色:程序核心文件,修改这类文件时千万要注意安全!橙色:做插件几乎不会用到的文件,大概了解功能就可以了,其实我也不推荐修改这些文件绿色:函数类文件,许多功能强大的自定义函数可以调用这类文件来...

PHP利用Curl模拟登录并获取数据例子

PHP利用Curl模拟登录并获取数据例子

几乎所有的程序员来模仿用户登录或抓取数据都会使用到curl函数,下面我来给各位介绍利用curl函数实现登录并抓取数据,希望下面例子对各位有帮助。PHP的curl()在抓取网页的效率方面是比较高的,而且支持多线程,而file_get_contents()效率就要稍低些,当然,使用curl时需要开启下c...

php利用百度地图API进行IP定位和GPS定位

最 近在做一个手机端的webapp地图应用,而核心内容当然是定位了,但是定位的话有几种方式,IP定位,GPS定位,基站定位(这个貌似webapp用不 了), 那么剩下核心的gps定位和ip定位了,我们知道,html5有定位API,但是该API拿到的GPS数据是硬件坐标,无法直接显示在地图上。...

发表评论

访客

看不清,换一张

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