涉及到系统集成的时候,前端我们经常会用到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. MQ(基本概念)

    MQ的基本概念 队列管理器:是MQ中最上层的一个概念,由它为我们提供消息队列服务. 消息:即应用程序发送给MQ托管的数据.其有两部分组成:消息描述符和消息体. 消息分为两种类型:永久型和非永久型. 永 ...

  2. 使用JAX构建强化学习agent并借助TensorFlowLite将其部署到Android应用中

    在之前发布文章<一个新 TensorFlow Lite 示例应用:棋盘游戏>中,展示了如何使用 TensorFlow 和 TensorFlow Agents 来训练强化学习 (RL) ag ...

  3. python通过轮子安装第三方库(以Wordcloud为例)

    1.查看python版本 直接输入如下命令: python 执行结果如下: 我们可以直到,本机的python版本为: AMD64bit 3.11版本python 2.下载合适python版本的轮子 下 ...

  4. VsCode里面运行mvn命令显示The JAVA_HOME environment variable is not defined correctly

    问题描述 关于这个问题,就是环境配置出了问题!!! 问题解决 在settings.json里面,配置的环境的路径不能出错,我就是在配置的时候,名为Environments的文件夹写成Environme ...

  5. 发布新版博客备份功能:生成 sqlite 数据库文件,vscode 插件可查看

    大家好,最近我们重新开发了园子的博客备份功能,今天发布第一个预览版,欢迎大家试用. 点击博客后台侧边栏的博客备份进入新版博客备份: 点击创建备份按钮创建博客备份任务(目前每天只能创建一次备份),待备份 ...

  6. SpringBoot——日志及原理

    一.SpringBoot日志 选用 SLF4j(接口)和 logback(实现类),除了上述日志框架,市场上还存在 JUL(java.util.logging).JCL(Apache Commons ...

  7. Java面试——Tomcat

    更多内容,前往个人博客 一.Tomcat 顶层架构 ​ Tomcat 中最顶层的容器是 Server,代表着整个服务器,从上图中可以看出,一个 Server可以包含至少一个 Service,用于具体提 ...

  8. 【Avalonia】【跨平台】关于控件阴影简单用法

    背景 当我们在用Avalonia开发项目时,我们可能会对控件添加一些阴影效果,改善用户体验,我们开发WPF的人知道,WPF会给我提供Effect这么一个属性,这是方便我们进行阴影以及特效使用,但是Av ...

  9. 《3D编程模式》写书-第1天记录

    大家好,我现在开始写书了,书名为:<3D编程模式> 我会在本系列博文中记录写书的整个过程,感谢大家支持! 这里是所有的的写书记录: <3D编程模式>写书记录 为什么写书 去年我 ...

  10. CentOS&RHEL内核升级

    在安装部署一些环境的时候,会要求内核版本的要求,可以通过YUM工具进行安装配置更高版本的内核,当然更新内核有风险,在操作之前慎重,严谨在生产环境操作! 安装源 # 为 RHEL-8或 CentOS-8 ...