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 ...
随机推荐
- Leecode 88.合并两个有序数组
想法: 1:先把nums2中的所有元素都放到nums1,之后给合并后的数组排序 1 官方代码: 2 class Solution { 3 public void merge(int[] nums1 ...
- Java--接口和抽象类有什么区别
他们都不能实例化对象,都可以包含抽象方法,而且抽象方法必须被继承的类全部实现. 区别: 1.抽象类和接口都不能直接实例化,如果要实例化,抽象类变量必须指向实现所有抽象方法的子类对象,接口变量必须指向实 ...
- 11. ASCII, unicode, utf-8, gbk的区别
这是几种编码方式 ASCII是包含英文字母数字特殊字符等, 长度是1字节, 前128个是基础ASCII码, 128个以后是扩展ASCII码 GBK是国标扩展码, 长度2字节, 表示汉字以及各少数民族语 ...
- VSCode 快捷键,简化操作
一. 区域代码快捷键 1. 折叠所有 折叠所有区域代码的快捷: ctrl + k ctrl + 0 ; 展开所有折叠区域代码的快捷:ctrl +k ctrl + J ; 2. 按层 ...
- 【OGF生成函数板子题】牛客编程巅峰赛S2第11场 C 挑选方案问题
upd 2022-01-26 我找到了个题集 牛客竞赛数学专题班生成函数I(线性递推关系.生成函数概念与公式推导.暴力计算) 目录 题目链接 题面 解题思路 AC代码 题目链接 https://ac. ...
- CosineWarmup理论与代码实战
摘要:CosineWarmup是一种非常实用的训练策略,本次教程将带领大家实现该训练策略.教程将从理论和代码实战两个方面进行. 本文分享自华为云社区<CosineWarmup理论介绍与代码实战& ...
- java多线程--2 静态代理、Lambda表达式
java多线程--2 静态代理.Lambda表达式 静态代理 package com.ssl.demo02; //静态代理 //真实对象和代理对象都要实现同一个接口 //代理对象必须要代理真实角色 / ...
- Go语言:利用 TDD 逐步为一个字典应用创建完整的 CRUD API
前言 在数组这一章节中,我们学会了如何按顺序存储值.现在,我们再来看看如何通过键存储值,并快速查找它们. Maps 允许你以类似于字典的方式存储值.你可以将键视为单词,将值视为定义. 所以,难道还有比 ...
- Django笔记九之model查询filter、exclude、annotate、order_by
在接下来四五篇笔记中,将介绍 model 查询方法的各个细节,为我们的查询操作提供各种便利. 本篇笔记将介绍惰性查找.filter.exclude.annotate等方法,目录如下: 惰性查找 fil ...
- 纯CSS3实现多行文本截断
纯CSS处理多行文本展开和收起,直接上代码和效果图 1 <html> 2 <header> 3 <style> 4 .wrap { 5 position: rela ...