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 ...
随机推荐
- rename基本操作
电脑是Macbook, 用Homebrew先安装rename. 如果没安装Homebrew 直接复制到terminal中回车, 时间稍长. ruby -e "$(curl -fsSL htt ...
- Linux部分文件管理类命令
1.创建空文件和刷新时间 touch命令可以用来创建空文件或刷新文件的时间 touch [OPTION]... FILE... 选项: -a 仅改变atime和ctime -m 仅改变mtime和ct ...
- [转]常见的视频编码详解 Cinepak Codec by Radius
AVI所采用的压缩算法并无统一的标准.也就是说,同样是以AVI为后缀的视频文件,其采用的压缩算法可能不同,需要相应的解压软件才能识别和回放该AVI文件.除了Microsoft公司之外,其他公司也推出了 ...
- 无法下载外网Docker镜像的解决方案
概述 在安装k8s相关组件时经常会遇到需要下载一些外网的Docker镜像仓库,比如k8s的一个NFS存储类k8s.gcr.io/sig-storage/nfs-subdir-external-prov ...
- 百炼成钢 —— 声网实时网络的自动运维丨Dev for Dev 专栏
本文为「Dev for Dev 专栏」系列内容,作者为声网大数据算法工程师黄南薰. 01 自动运维介绍 2016 年,Gartner 创新性地提出了 AIOps 的概念[1],开创了人工智能辅助运维决 ...
- 论文翻译:2023_THLNet: two-stage heterogeneous lightweight network for monaural speech enhancement
论文地址:THLNet: 用于单耳语音增强的两级异构轻量级网络 代码:https://github.com/dangf15/THLNet 引用格式:Dang F, Hu Q, Zhang P. THL ...
- 【Visual Leak Detector】配置项 ForceIncludeModulesmd
说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记.本篇介绍 VLD 配置文件中配置项 ForceIncludeModules 的使用方法. 同系列文章目录可见 <内存泄漏检测工具&g ...
- 红队实战靶场ATT&CK(二)
一.环境配置 web靶机有一块NAT网卡,只需要修改这块NAT网卡的网关,IP改成与攻击机器同网段就可以了 到web靶机中C:/Oracle/Middleware/user_projects/doma ...
- freeswitch媒体协商的优先级方案
概述 freeswitch是一款简单好用的VOIP开源软交换平台. 不同的媒体格式各有优缺点,实际环境中的应用要根据线路和客户的实际需求确定. 本文中介绍一种较为通用的媒体配置方案,可以适配大部分场景 ...
- data.frame数据框操作——R语言
统计分析中最常见的原始数据形式是类似于数据库表或Excel数据表的形式. 这样形式的数据在R中叫做数据框(data.frame). 数据框类似于一个矩阵,但各列允许有不同类型:数值型向量.因子.字符型 ...