涉及到系统集成的时候,前端我们经常会用到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完美自适应宽度、高度的更多相关文章

  1. vue中嵌套页面(iframe)

    vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...

  2. vue中添加less配置,用于计算div高度

    需求:左边垂直的菜单栏高度设置为 100% - 导航栏的高度(3.6rem) 首先,从vue-cli脚手架里的安装的webpack模板中并没有less的依赖配置,得自己手动添加安装 安装命令::npm ...

  3. [转]iframe自适应宽度高度

    <iframe id="iframe" onLoad="AutoFit();" frameborder="0" scrolling=& ...

  4. vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...

  5. storyboard xib下label怎么自适应宽度高度

    先看需求:两个Label,要求蓝色的label紧跟在红色的label文字后面  ok首选正常添加约束 红色的Label添加宽度,高度,左边,上边约束 蓝色的Label添加宽度,高度,左边,和红色的水平 ...

  6. iOSstoryboard xib下label怎么自适应宽度高度

    先看需求:两个Label,要求蓝色的label紧跟在红色的label文字后面 ok首选正常添加约束 红色的Label添加宽度,高度,左边,上边约束 蓝色的Label添加宽度,高度,左边,和红色的水平对 ...

  7. eayui js动态加载Datagrid,自适应宽度,高度

    HTML: <div class="easyui-layout" style="min-height:100%;min-width:100%;"> ...

  8. Vue中iframe和组件的通信

    最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...

  9. vue中嵌套页面 iframe 标签

    vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...

  10. vue中比较完美请求的栗子(使用 axios 访问 API)

    vue中比较完美请求的栗子(使用 axios 访问 API) 官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-api ...

随机推荐

  1. Weblogic禁用不安全的http请求

    参考链接: https://blog.csdn.net/linfanhehe/article/details/78470733

  2. mongodb定时备份

    1. https://www.jianshu.com/p/a9352e28e2d6   (未测试) 通过centos 脚步来执行备份操作,使用crontab实现定时功能,并删除指定天数前的备份 具体操 ...

  3. mininet配置命令

    Mininet实验手册 一.安装 1.  直接使用带有完整软件的VM(略) 2.  源码安装 1)  下载 git clone git://github.com/mininet/mininet 2)  ...

  4. Hyperf安装

    转载网址: https://www.cnblogs.com/lyc94620/p/12821723.html

  5. 【ASP.NET Core】修改Blazor.Server的Hub地址后引发的问题

    Blazor Server,即运行在服务器上的 Blazor 应用程序,它的优点是应用程序在首次运行时,客户端不需要下载运行时.但它的代码是在服务器上执行的,然后通过 SignalR 通信来更新客户端 ...

  6. ABAC框架-casbin

    参考文档:https://www.kancloud.cn/oldlei/casbin/1289455 参考博客:https://www.cnblogs.com/studyzy/p/11380736.h ...

  7. linux 镜像备份

    linux 镜像备份 使用linux虚拟机的方法 优点 镜像大小比较小 缺点 速度可能比较慢 方法 1.打开虚拟机 我用的ubuntu,读卡器连接电脑虚拟机,ubuntu一般会自动挂载 df -h # ...

  8. 疯一样的向自己发问 - 剖析lsm 索引原理

    疯一样的向自己发问 - 剖析lsm 索引原理 lsm简析 lsm 更像是一种设计索引的思想.它把数据分为两个部分,一部分放在内存里,一部分是存放在磁盘上,内存里面的数据检索方式可以利用红黑树,跳表这种 ...

  9. JVM 重点知识归纳

    JVM(Java Virtual Machine:译为 Java虚拟机)内核: 通常指通过软件模拟的具有完整硬件系统功能的运行在一个完全隔离环境汇总的完整计算机系统.如下:  ■  Mware/Vis ...

  10. 保持唯一性,请停止使用【python3 内置hash() 函数】

    问题: 如图,用hash() 筛重时竟然出现了重复. 如下图: hash字符串时,同一窗口的是一致的,不同窗口结果竟然不同. 原因: python的字符串hash算法并不是直接遍历字符串每个字符去计算 ...