涉及到系统集成的时候,前端我们经常会用到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. 什么是互联网控制消息协议ICMP 以及如何作为网络分析利器

    什么是互联网控制消息协议(ICMP) Internet控制消息协议(ICMP)是网络设备用来诊断网络通信问题的网络层协议.ICMP主要用于确定数据是否及时到达其预期目的地.通常,ICMP协议用于网络设 ...

  2. Springboot jar 打包脚本和启动脚本

    说明: SpringBoot极大的提高了工作效率,集成了各大厂优秀的组件,好处就不多说了,使用配置也非常方便,本文主要讲解如何使用更方便的方式打包发布,利用SpringBoot的新特性内置tomcat ...

  3. unidbgrid默认列排序

    UniDBGrid -> ClientEvents -> ExtEvents ->... function reconfigure(sender, store, columns, o ...

  4. (转)codeblocks 使用研究

    原帖:http://github.tiankonguse.com/blog/2014/10/11/codeblocks-shutcut.html 使用前 使用 codeblocks 前肯定是下载安装 ...

  5. keras图片数字识别入门AI机器学习

    通过使用mnist(AI界的helloworld)手写数字模型训练集,了解下AI工作的基本流程. 本例子,要基于mnist数据集(该数据集包含了[0-9]的模型训练数据集和测试数据集)来完成一个手写数 ...

  6. 项目构建node-sass源码报错 SyntaxError:Unexpectedtoken"?"

    背景 vue2项目,之前一直构建正常.今天改了代码,构建时报错,报错原因显示编译node-sass源码时出错. 报错信息: Modulebuild failed:/node_modules/node- ...

  7. 有奖征文活动:从 RTC 到 RTE,从音视频到「实时万象」!

    Hi 小伙伴们, 社区已经更名 RTE 两个月辣-大家对于 RTC 和 RTE 的区分,是否还有疑惑呢? 关于这两者的区别,我们创始人兼 CEO 赵斌老师说: "RTC(实时音视频)从 Co ...

  8. ElasticSearch可视化工具ElasticHD安装

    ElasticHD两种安装方式 1.ElasticHD介绍 ElasticHD 支持 ES监控.实时搜索,Index template快捷替换修改,索引列表信息查看, SQL converts to ...

  9. 全网最详细中英文ChatGPT-GPT-4示例文档-官网推荐的48种最佳应用场景——从0到1快速入门AI智能问答应用场景(附python/node.js/curl命令源代码,小白也能学)

    目录 Introduce 简介 setting 设置 Prompt 提示 Sample response 回复样本 API request 接口请求 python接口请求示例 node.js接口请求示 ...

  10. flutter feature---->quick action

    reference: https://www.filledstacks.com/snippet/managing-quick-actions-in-flutter/ code import 'dart ...