涉及到系统集成的时候,前端我们经常会用到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. Nginx配置ThinkPHP3.1的PATHINFO模式

    location / {    if (!-e $request_filename) {         rewrite ^/(.*)$ /index.php?$1 last;         bre ...

  2. python tkinter Checkbutton的新增和清除 取值

    from tkinter import * root = Tk() name = StringVar() check_box_list = [] ent=Entry(root,textvariable ...

  3. 两步解决macbook电池不充电

    问题描述: 1.电源适配器是冷的,判断并没有充电,更换拔插笔记本的不同TypeC插口问题依然.(怀疑适配器坏了,但心想Apple质量一个适配器不至于那么不抗用) 2.偶尔能开起来机,则显示电源3%,瞬 ...

  4. Conda 创建、激活、克隆、删除虚拟环境 - 搬运

    Conda 创建.激活.克隆.删除虚拟环境 转自 :https://zhuanlan.zhihu.com/p/547724114 风影忍着   通常来说,对于每一个新的项目,我们都需要创建一个新的环境 ...

  5. linux虚拟机设置网络显示NetworkManager need to be running

    问题描述:在设置一台centOS7虚拟机的网络时出现: 解决方法: 命令行重启NetworkManager systemctl restart NetworkManager 刷新一次就好了

  6. Codeforces Round 857 (Div. 2) A-D

    Codeforces Round 857 (Div. 2) A. Likes 求每回合最大的数列:先全使用正数,每个正数对ans++,再全使用负数,每个负数对ans-- 求每回合最小的数列:方法1(模 ...

  7. archlinux 源配置 桌面美化 终端美化 常用软件 grub配置

    简介 本文讲对archlinux进行一些基础系统的配置.常用安装的安装,美化进行配置,先看一下美化后的效果吧 配置pacman和使用AUR(archlinuxcn源) archlinux采用滚动更新的 ...

  8. SpringBoot笔记--文件配置加载顺序+整合其他框架

    内部文件配置加载顺序 外部文件配置加载顺序 jar包配置 整合Junit 若是业务管理类和测试类在同一个包下面,那么这句话, 可以不加括号,只写注解名称 否则,就必须指定到包下面,不然会报错 整合Re ...

  9. Jetson Xavier NX 试玩 (一)

    Jetson Xavier NX 试玩 (一) 环境搭建 0 前言 NVIDIA家的Jetson系列是业内嵌入式边缘计算机的代表作,体积小,功能强是其最主要的优点. 学院入手了一款Jeston Xav ...

  10. 虚拟办公、虚拟展会、虚拟偶像,RTE+XR 还能做什么?

    2021年6月10日,HTC VIVE 在北京举办以"融合·至界"为主题的新品体验会暨开发者客户大会.近 300 位 XR 行业精英齐聚一堂,共同见证了 HTC VIVE 全能 V ...