vue中使用iframe嵌入网页,页面可自适应问题

目录
  • 使用iframe嵌入网页,页面可自适应
  • vue iframe高度自适应 实用
    • 实时刷新iframe高度变化
    • iframe高度有变的时候通知父级
    • iframe高度有变的时候直接修改iframe高度

使用iframe嵌入网页,页面可自适应

在项目中遇到要嵌入第三方网页的需求,因为没有同第三方页面交互的需求,只需展示即可,所以最终决定使用 iframe 将第三方的网页嵌入到系统中,并且做到自适应效果。

考虑到以后可能会增加嵌入页面的数量,故而封装成组件,供以后复用:

上图为系统整体结构图,需要在内容区内展示 iframe 的内容,并且做到自适应。

整体代码如下:

<template>
  <div class="iframe-container">
    <iframe id="iframeContainer" :src="iframeUrl" frameborder="0" />
  </div>
</template>
 
<script>
import { mapGetters } from 'vuex'

export default {
  name: 'IframeContainer',
  props: {
    iframeUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  watch: {
    'sidebar.opened': {
      handler: function() {
        this.initIframe()
      },
      immediate: true
    }
  },
  mounted() {
    this.initIframe()

    window.onresize = () => {
      this.initIframe()
    }
  },
  methods: {
    initIframe() {
      const iframeContainer = document.getElementById('iframeContainer')
      const deviceWidth = document.body.clientWidth
      const deviceHeight = document.body.clientHeight
      iframeContainer.style.width = this.sidebar.opened ? (Number(deviceWidth) - 293) + 'px' : (Number(deviceWidth) - 71) + 'px'
      iframeContainer.style.height = (Number(deviceHeight) - 110) + 'px'
    }
  }
}
</script>
 
<style lang="scss" scoped>
  .iframe-container {
    width: 100%;
    height: 100%;
  }
</style>

要确保嵌入的页面做到自适应的效果,首先保证 iframe 是自适应的,此处关键代码:

动态计算 iframe 的宽度和高度,计算时需要减去侧边栏宽度、内容区 padding、顶部导航高度等。

监听窗口大小改变事件,触发 iframe 宽度高度计算方法,重新为 iframe 设置宽度和高度:

如果系统侧边栏或者顶部导航是可收缩的,还需监听收缩事件,进而改变 iframe 高度和宽度:

此处监听 sidebar 的展开状态,在此不做过多赘述。

vue iframe高度自适应 实用

iframe是vue的,在使用过程中高度根据数据实时变化,不好设置iframe的高度值。试了多种方式之后,总结了几种自适应的方式。

实时刷新iframe高度变化

var iframes = document.getElementsByTagName('iframe');
setInterval(function() {
    for (var i = 0, j = iframes.length; i < j; ++i) {         
        iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight);
    }
}, 1000);

iframe高度有变的时候通知父级

// iframe
this.$nextTick(()=>{
  parent.window.iframeChangeHeight()
})
// 父级
function iframeChangeHeight(){
 var iframes = document.getElementsByTagName('iframe');
 for (var i = 0, j = iframes.length; i < j; ++i) {
    iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight);
 }
}

iframe高度有变的时候直接修改iframe高度

function iframeChangeHeight(){
  let iframes = window.parent.document.getElementsByTagName('iframe');
  for (var i = 0, j = iframes.length; i < j; ++i) {
    iframes[i].setAttribute('height', iframes[i].contentWindow.document.body.scrollHeight)
  }
},

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue中使用iframe踩坑问题记录 iframe+postMessage

    目录 使用iframe踩坑记录 iframe+postMessage 1.iframe的初始高度问题 2.postMessage的实现 iframe使用postMessage传值addEventListener未接收到却收到webpackwarning问题 bug如下 问题解决 使用iframe踩坑记录 iframe+postMessage 需求:最近在写一个博客的功能模块,技术栈是单独选择的vuepress,完成后想要融合到一个vue工程里,考虑到后期维护的问题,就通过iframe将vuepr

  • vue中如何通过iframe方式加载本地的vue页面

    目录 通过iframe方式加载本地的vue页面 iframe方式加载本地的vue页面的第一种方法 iframe方式加载本地的vue页面的第二种方法 iframe方式加载本地的vue页面的第三种方法 关于iframe在vue中应用问题 iframe的宽高无法根据内容撑开 通过iframe方式加载本地的vue页面 也是在实际的项目中碰到一个奇葩的需求,用vue,居然还要用到iframe,真是脑壳大,试了好多次最后才找到了正确的方法. 总共有三种方法吧 iframe方式加载本地的vue页面的第一种方法

  • vue中iframe的使用及说明

    目录 关于iframe的使用 获取iframe里面的内容 CDM跨域 使用iframe的总结 代码展示 关于iframe的使用 iframe在同域时能自由操作iframe和父框架的内容(DOM),在跨域时可以实现页面跳转. <iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder=&quo

  • vue中iframe使用以及结合postMessage实现跨域通信

    目录 使用场景 需求 iframe使用 基本使用 常用属性 iframe高度自适应 获取iframe的内容 同域下获取父级/子级内容 iframe跨域 postMessage通信 在vue中使用 使用场景 需求 在一个H5项目的页面中以url的方式嵌入另一个项目的页面.(不得不使用iframe) 而为了兼容移动端api(封装的一个移动端api,iframe内嵌页面不生效),需要实现父子页面的通信 (使用postMessage). iframe使用 基本使用 直接在页面嵌套iframe标签指定sr

  • vue与iframe之间的交互方式(一看就会)

    目录 vue与iframe之间的交互 子页面向父页面传值 父页面向子页面传值 vue与html之间iframe交互 1.父级调用子级ifram中的方法 2.子级iframe(html 或者vue)调用父级html中的方法 3.vue中调用子级iframe html 中的方法 4.在iframe中调用vue中的方法 vue与iframe之间的交互 首先介绍一下使用背景,前端采用html单页面引用vue的方式(逼不得已这么做,否则直接用vue不香嘛),废话不多说 页面大致是这样,现在需要做的是在if

  • vue中使用iframe嵌入网页,页面可自适应问题

    目录 使用iframe嵌入网页,页面可自适应 vue iframe高度自适应 实用 实时刷新iframe高度变化 iframe高度有变的时候通知父级 iframe高度有变的时候直接修改iframe高度 使用iframe嵌入网页,页面可自适应 在项目中遇到要嵌入第三方网页的需求,因为没有同第三方页面交互的需求,只需展示即可,所以最终决定使用 iframe 将第三方的网页嵌入到系统中,并且做到自适应效果. 考虑到以后可能会增加嵌入页面的数量,故而封装成组件,供以后复用: 上图为系统整体结构图,需要在

  • vue使用iframe嵌入网页的示例代码

    1.列表页面: this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, reportType: reportType }}) 点击查看后触发事件,带入参数跳转到userTemplate页面:reportType有两种类型,0表示reportUrl是绝对网址,1表示reportUrl是本地html文件. 2.userTemplate页面: <template> <div> <iframe

  • Vue中在新窗口打开页面及Vue-router的使用

    背景 在开发提分加项目的过程中,遇到了点击下拉菜单时在新窗口中打开页面,由于之前一直做的是单页面应用,没有碰到过类似的需求,于是上网搜了一下解决办法,也再次系统地温习了一下vue-router. 解决 使用路由对象的resolve方法解析路由,可以得到location.router.href等目标路由的信息.得到href就可以使用window.open开新窗口了. const {href} = this.$router.resolve({ name: "statistics-explain&qu

  • vue中使用[provide/inject]实现页面reload的方法

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject]实现刷新 该方法t简单的来说就是在父组件中 1.设置provider 2.然后在子组件中通过inject调用 3.在需要执行的地方直接调用方法即可 总结 以上所述是小编给大家介绍的vue中使用[provide/inject]实现页面reload的方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 在vue中实现某一些路由页面隐藏导航栏的功能操作

    为了将导航栏显示在每一个页面中,可以将导航栏与<router-view>放在同一级显示,如下: <header> ... </header> <router-view></router-view> 但是,在某些时候,我们需要隐藏导航栏显示,比如登录界面,为了实现导航栏的隐藏,可以使用如下代码: <header v-show="$route.name!=='login'"> ... </header> &

  • Vue中对iframe实现keep alive无刷新的方法

    前言 最近一个需求,需要在 Vue 项目中加入 含有iframe 的页面,同时在路由切换的过程中,要求iframe的内容 不会被刷新 .一开始使用了Vue自带的keep- alive发现没有用,于是自己研究了一下解决方案...... Vue的keep-alive原理 要实现对保持iframe页的状态.我们先搞清楚为什么Vue的keep-alive不能凑效.keep-alive原理是把组件里的节点信息保留在了 VNode (在内存里),在需要渲染时候从Vnode渲染到真实DOM上.iframe页里

  • vue中的vue-print-nb如何实现页面打印

    目录 安装 在main.js中全局引入 页面中使用 安装 npm install vue-print-nb --save 在main.js中全局引入 import Print from 'vue-print-nb' Vue.use(Print); 页面中使用 备注:只会打印id=printMe内的网页 <template>   <div class="table">     <div class="tableList">    

  • vue中按钮操作完刷新页面的实现

    目录 vue按钮操作完刷新页面 1.父组件中实现 2.子组件绑定 点击按钮后自动刷新页面 vue按钮操作完刷新页面 首先从子组件和父组件角度去写这个东西,简言之就是在父组件中实现这个刷新功能方法,然后在子组件中进行绑定并进行监听就好了啊 1.父组件中实现 ① 图示部分: 个人建议这个作为父组件,肯定一般是放在列表中的,即把列表页面作为父组件的归属地 ② 代码部分: method方法中部分 refresh () { this.reload() } 将reload进行注入 inject: ['rel

  • vue中使用localstorage来存储页面信息

    今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻. 环境搭建: 参考:vue API 超简单的Vue.js环境搭建教程 详情: npm install --global vue-cli  vue init webpack vue-project 然后: cd vue-project npm install    如果你配置了淘宝镜像,也可以用cnpm install

随机推荐