vue中使用iframe嵌入网页,页面可自适应问题
作者:beijixing333y 发布时间:2024-04-26 17:38:24
标签:vue,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)
}
},
来源:https://blog.csdn.net/beijixing333y/article/details/125428986
0
投稿
猜你喜欢
- 当点了链接后,跳出的网页地址是https://www.aspxhome.com/ 或https://www.cidianwang.
- 前言标准的 Bloom Filter 是一种比较简单的数据结构,只支持插入和查找两种操作。在所要表达的集合是静态集合的时候,标准 Bloom
- 图片修复程序-可用于水印去除在现实的生活中,我们可能会遇到一些美好的或是珍贵的图片被噪声干扰,比如旧照片的折痕,比如镜头上的灰尘或污渍,更或
- python运行其他程序的实现方法  
- 前言Django处理json也是一把好手,有时候在工作中各个部门都会提供自己的相关接口,但是信息也只是单方的信息,这时候需要运维将各个部门的
- 首先呢,需要有两个mysql服务器。如果做测试的话可以在同一台机器上装两个mysql服务程序,注意要两个运行程序的端口不能一样。我用的是一个
- window.onload=function(){ pd(11);} function pd(number) { if(number>
- 概述 -------------------------------------------------------------------
- 本文实例讲述了Javascript与PHP验证用户输入URL地址是否正确的方法,分享给大家供大家参考。具体方法如下:1.javascript
- 很多时候我们会发现有的时候输出的结果特别多的时候,会在最后输出时用。。。代替,最后输出一个总长度,那要咋么弄咧?import pandas
- Capstone是Kali Linux自带的一款轻量级反汇编引擎。它可以支持多种硬件构架,如ARM、ARM64、MIPS、X86。该框架使用
- 在上篇给大家介绍了Java中正则表达式的使用和详解(上),具体内容如下所示:1.常用正则表达式规则正则表达式语法 一个或多个汉字
- 做个性休闲类项目课程材料,对这方面要求多一些,要总结方法、手法、想法等等,头大了;这里总结了一个做个性字体设计的方法,分享一下;方法是比较简
- 函数是一种仅在调用时运行的代码块。可以将数据(称为参数)传递到函数中。函数可以把数据作为结果返回。创建函数在 Python 中,使用 def
- MYSQL官方提供了Installer方式安装MYSQL服务以及其他组件,使的Windows下安装,卸载,配置MYSQL变得特别简单。1.
- 本文实例为大家分享了python3实现简单飞机大战的具体代码,供大家参考,具体内容如下游戏分为两个部分:1.主程序 2.游戏工具主程序实现:
- 一、设计理念1.先写一个登录的py文件,用python的tkinter库2.再写一个py文件用于爬取有道翻译输出栏的内容3.再利用pytho
- 示例标准线程多进程,生产者/消费者示例:Worker越多,问题越大# -*- coding: utf8 -*-import osimport
- 通常说到外键,只会提到“外键的目的是确定资料的参考完整性(referential integrity)。”,但是外键具体包含哪些动作和含义呢
- 前言前面安装过mysql5.6,时隔三个月,开发那边反馈需要在MySQL中处理JSON类型的数据,查看文档,JSON是在5.7支持的新特性。