涉及到系统集成的时候,前端我们经常会用到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. python实现简单猜数字游戏

    #!/usr/bin/env python import os import random import sys import time def yanse(s): print('\033[25;31 ...

  2. 给临时停车号码牌插上翅膀:lua脚本语言加入—鲁哇客智能挪车号码牌技术升级之路

    预计6月中旬上线的,带语音的智能挪车号码牌,会新增lua编程脚本的支持.类似于我们的手机,从功能机到智能机的进化,有着划时代的意义:产品功能不再由厂家决定,她可由lua编程脚本书写,随时编辑修改. l ...

  3. classload加载机制

    BootstrapClassLoader.ExtClassLoader.AppClassLoader实际是查阅相应的环境属性sun.boot.class.path.java.ext.dirs和java ...

  4. Spring简介-IOC

    目录 1.Spring 1.1.简介 1.2.优点 1.3.组成 1.4.扩展 2.IOC理论推导 1.Spring 1.1.简介 Spring:春天----------->给软件行业带来了春天 ...

  5. Linux shell usage()使用说明

    usage()类似于执行文件-help展示的内容,即告诉使用者有哪些参数选项可供使用. usage()格式 点击查看代码 #!/bin/bash usage() { echo "Usage: ...

  6. hydra暴力破解各种服务

    hydra 在爆破工具中,hydra可是数一数二的存在,是著名黑客组织thc开发的一款开源的暴力密码破解工具,可以在线破解多种密码 参数 作用 -l 指定用户名 -p 指定密码 -L 指定用户字典 - ...

  7. 痞子衡嵌入式:MCUBootUtility v2.3.1发布,解决了长久以来非空flash可能无法下载的问题

    -- 痞子衡维护的NXP-MCUBootUtility工具距离上一个版本(v2.3)发布过去3个月了,这一次痞子衡为大家带来了小版本升级v2.3.1(第一次做x.y.z中z级别更新),这个版本主要有两 ...

  8. MySQL学习(十一)为什么不推荐使用uuid和雪花id

    参考博客:https://www.cnblogs.com/wyq178/p/12548864.html 自增的主键的值是顺序的,所以Innodb把每一条记录都存储在一条记录的后面.当达到页面的最大填充 ...

  9. MySQL学习(五)事务

    参考博客:https://www.cnblogs.com/kismetv/p/10331633.html 0.提交和回滚 注:mysql默认自动开启了事务. -- 手动开启事务 start trans ...

  10. C++ 猜数字

    #include <iostream> #include <random> #include <limits> namespace random { std::ra ...