Iframe自适应高度
最近一直忙于做Echarts图表,整体实现思路是将Echarts需要的Div容器放在Iframe中,然后在页面加载的时候加载Iframe,这样选择不同设备,展示不同的设备对应的报表即可,实现局部刷新。
其中涉及到一个Iframe在父页面中自适应的问题,方案(推荐使用方案二):
1. 注意这里我有+150的操作,因为获取的高度不够,所以可以根据实际情况自己添加,这种方法的缺陷就是Bootstrap的响应式拉伸的时候并不能随着Iframe的高度变化而改变高度,灵活性不高,而且存在着不同分辨率下的高度不统一的情况,就是换个分辨率这个方法撑开的Iframe页面就不能完美撑开了。
function iframesize(iframe) { //iframe的IDif (document.getElementById) {var ifra = document.getElementById(iframe);ifra.height = document.documentElement.clientHeight + 150;}}window.onresize = function () {iframesize('iframe');}
2.这个方案可以完美的撑开Iframe页面,实现思路是在子页面中获取页面高度,获取到高度后,在子窗体中操作父窗体的Iframe控件的高度属性,同时添加一个窗体监控,这样页面拉伸时调用监控事件,这样就能动态改变Iframe的高度属性了。
//子页面代码
var height = $(document.body).height() +10; //获取子页面的高度window.parent.changeHeight(height); //调用父窗体的changeHeight()方法window.onresize = function () { //添加窗体监控var height = $(document.body).height() + 10;window.parent.changeWid(height);}
//父窗体代码
function changeHeight(height) {$("#iframe").css("height", height); }
<iframe id="iframe" style="width: 100%; padding-left: 2%;" scrolling="no" frameborder="0"></iframe>
Iframe自适应高度相关推荐
- Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐[转]
Iframe自适应高度绝对好使的代码,IE.遨游.火狐.Chrome都兼容,需要的朋友可以参考下. 这是我试了很多相关代码后发现的兼容性最好的Iframe自适应高度代码. <script typ ...
- [转]让iframe自适应高度-真正解决
原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...
- 【前端开发】前端引入公共部分footer header的几种方法,及iframe自适应高度js
一.引入页面几种方法 1.IFrame引入,看看下面的代码 <iframe frameborder=0 border=0 width=300 height=300 src= ...
- php iframe 自适应高度,两个iframe自适应高度的解决方法
很多小伙伴在做网站的时候对于解决 1.需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条. 2.方法一: 在iframe上面直接加onload的 ...
- 跨域下的iframe自适应高度
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- iframe 自适应高度的多种实现方式
iframe高度自适应内容 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. 设置iframe 自适应高度,使其等于内嵌网页的高度 ...
- php iframe 自适应高度,iframe自适应高度
很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1.需求分析: 使页面中的iframe可 ...
- php iframe 自适应高度,让iframe自适应高度的讲解
为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉.在页面中通过iframe嵌入了另外一 ...
- 设置iframe自适应高度
设置iframe自适应高度 HTML <iframe src="main.html" frameborder="0" scrolling="no ...
- Iframe自适应高度,Iframe高度问题解决
Iframe自适应高度,Iframe高度问题解决 ================================ ©Copyright 蕃薯耀 2021-03-10 https://www.cnbl ...
最新文章
- python自动化干什么-高效工作,拒绝加班,看Python自动化功能到底有多强大
- FAT AP和FIT AP 区别 (无线篇)
- 最大均值差异java_MATLAB最大均值差异(Maximum Mean Discrepancy)
- c++opencv显示中文_OpenCV如何入门秘籍
- 拓端tecdat|R语言如何做马尔可夫转换模型markov switching model
- D - The Lucky Week ZOJ - 3939 (思维)
- 驰为 hi12 linux,PC商务体验 Intel四核平板驰为Hi12评测
- 218. 天际线问题
- 【积跬步以至千里】Markdownpad2报错: Html Rendering Error:An error occurred with the HTML rendering component。
- 面试入职工作感悟:在阿里的那些风花雪月的日子
- 打不开eclipse 由于它来自身份不明的开发者
- 随心所欲Do whatever you want——Minecraft
- 水仙花数判断 (10 分)
- python修改注册表
- [连载 1] 如何将协议规范变成开源库系列文章之 WebSocket
- 网站优化问题:雅虎网站优化35条
- ADSL接入网的结构和工作方式
- idea配置 Tomcat Deployment添加时没有Artifact选择的解决方案
- animals中文谐音_animals中文谐音_张杰pretty white lies中文音译歌词
- tensorflow零基础入门学习