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 ...
随机推荐
- SQL语句用法总结
use quan56_goods; 使用数据库 show tables; 展示数据表 模糊查询 select * from tb_brand where name like '%林%'; 顺序 书写顺 ...
- LIS3DH三轴加速度计-实现欧拉角(俯仰角,横滚角)-转载
1. LIS3DH管脚定义 PS:LIS3DH和mpu6050的X和Y方向是相反的, mpu6050如下图所示: 2.LIS3DH加速度计介绍 由于LIS3DH只可以得到XYZ加速度,无法获取角速度, ...
- Grafana Dashboard
Grafana Dashboard jvm micrometer (4701) jmx_export (8563) https://grafana.com/grafana/dashboards/856 ...
- Android笔记--Android studio里面打开数据库详解
1.下载Database Navigator插件,然后需要重启Android studio 2.然后会总界面这里.出现这样一个图标 然后选中Database Brower: 3.弹出这样一个界面 然后 ...
- Linux系统下祼机安装mysql8.0和docker mysql 8.0 性能差异对比~
环境准备 准备两台服务器环境,配置相同,分别安装Centos7,mysql8.0,docker mysql 8.0 准备测试代码 public class Chat { public static l ...
- pyinstall打包工具使用简介
使用pyinstall进行多个文件打包,直接打包主入口文件即可 pyinstaller MainUI.py -F -n ServerMonitorv200 -i PIC.ico -w 此处MainUI ...
- webgl 系列 —— 绘制猫
其他章节请看: webgl 系列 绘制猫 上文我们了解了如何绘制渐变彩色三角形,明白了图形装配.光栅化,以及片元着色器计算片元的颜色. 现在如果让你绘制如下一只猫.难道绘制很多三角形,然后指定它们的颜 ...
- SpringBoot——配置及原理
更多内容,前往IT-BLOG 一.Spring Boot全局配置文件 application.properties 与 application.yml 配置文件的作用:可以覆盖 SpringBoot ...
- 怎么用ChatGPT写代码,ChatGPT怎么改代码修BUG
ChatGPT 是一个自然语言处理模型,可以模拟人类语言生成文本,可以用于写代码和修复bug.在本文中,我们将介绍如何使用 ChatGPT 写代码和修bug. 怎么用ChatGPT写代码? 虽然 Ch ...
- 移动端测试辅助工具 - adb
1. 概念: adb(android debug bridge)是android提供的基于CS架构的命令行调试工具,使PC与安卓设备之间实现通信 2. 基础原理: 交互图: 主要由三部分组成: adb ...