vue中让嵌入的iframe完美自适应宽度、高度
涉及到系统集成的时候,前端我们经常会用到iframe嵌入,但是嵌入的时候经常有不适应的情况,太长或太宽、滚动条。。。
下面的方法可以做到使嵌入的iframe自适应宽度、高度,
1、嵌入iframe,加入onload事件
<iframe
src="https://iview.github.io/docs/guide/install"
frameborder="0"
scrolling="auto"
id="bi_iframe"
@load="adjustIframe"
style="position: absolute; top: 0px; left: 0px"
></iframe>
2、在methods中添加自适应js的方法
adjustIframe() {
var ifm = document.getElementById("bi_iframe");
ifm.height = document.documentElement.clientHeight;
ifm.width = document.documentElement.clientWidth;
},
vue中让嵌入的iframe完美自适应宽度、高度的更多相关文章
- vue中嵌套页面(iframe)
vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...
- vue中添加less配置,用于计算div高度
需求:左边垂直的菜单栏高度设置为 100% - 导航栏的高度(3.6rem) 首先,从vue-cli脚手架里的安装的webpack模板中并没有less的依赖配置,得自己手动添加安装 安装命令::npm ...
- [转]iframe自适应宽度高度
<iframe id="iframe" onLoad="AutoFit();" frameborder="0" scrolling=& ...
- vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...
- storyboard xib下label怎么自适应宽度高度
先看需求:两个Label,要求蓝色的label紧跟在红色的label文字后面 ok首选正常添加约束 红色的Label添加宽度,高度,左边,上边约束 蓝色的Label添加宽度,高度,左边,和红色的水平 ...
- iOSstoryboard xib下label怎么自适应宽度高度
先看需求:两个Label,要求蓝色的label紧跟在红色的label文字后面 ok首选正常添加约束 红色的Label添加宽度,高度,左边,上边约束 蓝色的Label添加宽度,高度,左边,和红色的水平对 ...
- eayui js动态加载Datagrid,自适应宽度,高度
HTML: <div class="easyui-layout" style="min-height:100%;min-width:100%;"> ...
- Vue中iframe和组件的通信
最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...
- vue中嵌套页面 iframe 标签
vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...
- vue中比较完美请求的栗子(使用 axios 访问 API)
vue中比较完美请求的栗子(使用 axios 访问 API) 官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-api ...
随机推荐
- Vue-Router 路由与配置
现在的很多应用都流行SPA应用(singe page application) . 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候因受到网络.性能的影 ...
- 【Visual Leak Detector】在 QT 中使用 VLD(方式三)
说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记. 目录 说明 1. 使用前的准备 2. 在 QT 中使用 VLD 2.1 复制 lib 库及头文件 2.2 在项目 .pro 文件中指明路 ...
- Java面试——不安全的集合类
Java 中有许多的集合,常用的有List,Set,Queue,Map. 其中 List,Set,Queue都是Collection(集合),List<String>中<>的内 ...
- MySQL 查询执行的过程
查询的生命周期大致可以按照顺序来看:从客户端到服务端,然后在服务器上进行解析,生成执行计划,执行,并返回结果给客户端.其中 "执行" 可以认为是整个生命周期中最重要的阶段,其中包括 ...
- Mysql 事务隔离级别和锁的关系
我们都知道事务的几种性质,数据库为了维护这些性质,尤其是一致性和隔离性,一般使用加锁这种方式.同时数据库又是个高并发的应用,同一时间会有大量的并发访问,如果加锁过度,会极大的降低并发处理能力.所以对于 ...
- R语言文本数据挖掘(四)
文本分词,就是对文本进行合理的分割,从而可以比较快捷地获取关键信息.例如,电商平台要想了解更多消费者的心声,就需要对消费者的文本评论数据进行内在信息的数据挖掘分析,而文本分词是文本挖掘的重要步骤.R语 ...
- Proxmox VE镜像分析与定制
Proxmox VE(Proxmox Virtual Environment,简称PVE)是一个开源的服务器虚拟化环境Linux发行版,基于Debian,使用给予Ubuntu的定制内核.相比于其他虚拟 ...
- [Git/GitLab]使用SSH远程登录GitLab/GitHub
1 前言 近日,换了台新电脑. 今日,正要更新(git pull)GitLab的源码时,在配置(用户名,邮箱,密码git config --global -l)完全无误的情况下,却报出如下错误: $ ...
- VMWare无法从主机向虚拟机复制粘贴
VMWare无法从主机向虚拟机复制粘贴 问题描述 无法在本机和虚拟机之间实现复制粘贴和文件拖到功能. 系统环境 本机 Windows10 虚拟机 Centos7 解决方法 多次尝试重新安装VMware ...
- 访问不到tomcat下的静态资源文件
问题:idea+tomcat 测试Servlet,居然访问不到与WEB-INF同级的静态资源1.html.又不是访问WEB-INF里的文件.... 分析:可能是开发目录中的文件没有自动复制到部署目录. ...