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

vue配置iframe父级窗口通信

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

在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 get_contents($url){     if(function_exists('file_get_contents')){       &nbs...

php 使用curl模拟登录discuz以及模拟发帖

<?php $discuz_url = 'http://127.0.0.1/discuz/';//论坛地址 $login_url = $discuz_url .'logging.php?action=login...

php获取从百度搜索进入网站的关键词

<?php    function search_word_from() {     $referer = isset($_SERVER['HTTP_REFERER'])?...

dz第三方模块添加方法

dz第三方模块添加方法

使用dz做网站的朋友有时候会用到第三方模块专题,这就会遇到一个模块通信的问题,可是弄了半天就是“数据无法识别,请返回”, 也够雷人的,ok,这你就给大家分享下本人的一点经验,以供大家参考!dz第三方模块添加方法...

PHP数组和Json之间的转换

        之所以要用到Json,很多时候是因为使用ajax对象时,程序与JS函数之间的数据交互。因为JS不认识PHP中的数组,PHP也不认识JS中的数组或对象。Json很好的解决了这个问题。Json简介  ...

PHP开发之THINKPHP多表联合查询操作的三种方法

THINKPHP 中关联查询(多表查询)可以使用 table() 方法或和join方法,请看示例: 联合查询         1、原生查询    &...

发表评论

访客

看不清,换一张

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