iframe 自适应高度的多种实现方式
iframe高度自适应内容
需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
设置iframe 自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过css来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。
一、iframe内容未知,高度可预测
这个时候,我们可以给它添加一个默认的css的min-height值,然后同时使用JavaScript改变高度。常用的兼容代码有:
// document.domain = "caibaojian.com";
function setIframeHeight(iframe) {if (iframe) {var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;if (iframeWin.document.body) {iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight}}
}
window.onload = function () {setIframeHeight(document.getElementById('external-frame'))
}
(如果在同个顶级域名下,不同子域名之间互通信息,设置document.domain="caibaojian.com" 只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码,我们一般为了不污染HTML代码,建议使用上面的代码。
<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
二、多个iframe的情况下
// 输入你希望根据页面高度自动调整高度的iframe的名称的列表
// 用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。
// 定义iframe的ID
var iframeids = ['test']
// 如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
var iframehide = 'yes'function dyniframesize() {var dyniframe = new Array()for (i = 0; i < iframeids.length; i++) {if (document.getElementById) {// 自动调整iframe高度dyniframe[dyniframe.length] = document.getElementById(iframeids[i])if (dyniframe[i] && !window.opera) {dyniframe[i].style.display = 'block'if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) // 如果用户的浏览器是NetScape{dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight} else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) // 如果用户的浏览器是IE{dyniframe[i].height = dyniframe[i].Document.body.scrollHeight}}}// 根据设定的参数来处理不支持iframe的浏览器的显示问题if ((document.all || document.getElementById) && iframehide == 'no') {var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i])tempobj.style.display = 'block'}}
}
if (window.addEventListener) {window.addEventListener('load', dyniframesize, false)
} else if (window.attachEvent) {window.attachEvent('onload', dyniframesize)
} else {window.onload = dyniframesize
}
三、针对知道的iframe的ID调用
function iframeAutoFit(iframeObj) {setTimeout(function () {if (!iframeObj) return;iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight)}, 200)
}
四、内容宽度变化的iframe高度自适应
<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
function reinitIframe() {var iframe = document.getElementById('test')try {var bHeight = iframe.contentWindow.document.body.scrollHeightvar dHeight = iframe.contentWindow.document.documentElement.scrollHeightvar height = Math.max(bHeight, dHeight)iframe.height = heightconsole.log(height)} catch (ex) {}
}
window.setInterval('reinitIframe()', 200)
五、跨域下的iframe自适应高度
跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。
a.html中包含iframe:
<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>
在c.html中加入如下代码:
<iframe id="c_iframe" height="0" width="0" src="http://www.a.com/agent.html" style="display:none" ></iframe>
(function autoHeight() {var b_width = Math.max(document.body.scrollWidth, document.body.clientWidth)var b_height = Math.max(document.body.scrollHeight, document.body.clientHeight)var c_iframe = document.getElementById('c_iframe')c_iframe.src = c_iframe.src + '#' + b_width + '|' + b_height // 这里通过hash传递b.htm的宽高
})()
最后,agent.html中放入一段js:
var b_iframe = window.parent.parent.document.getElementById('Iframe')
var hash_url = window.location.hash
if (hash_url.indexOf('#') >= 0) {var hash_width = hash_url.split('#')[1].split('|')[0] + 'px'var hash_height = hash_url.split('#')[1].split('|')[1] + 'px'b_iframe.style.width = hash_widthb_iframe.style.height = hash_height
}
agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)
iframe 自适应高度的多种实现方式相关推荐
- [转]让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= ...
- Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐[转]
Iframe自适应高度绝对好使的代码,IE.遨游.火狐.Chrome都兼容,需要的朋友可以参考下. 这是我试了很多相关代码后发现的兼容性最好的Iframe自适应高度代码. <script typ ...
- php iframe 自适应高度,两个iframe自适应高度的解决方法
很多小伙伴在做网站的时候对于解决 1.需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条. 2.方法一: 在iframe上面直接加onload的 ...
- 跨域下的iframe自适应高度
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...
- 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 ...
最新文章
- linux下history(历史)命令用法详解
- 向uliweb中添加查找配置项功能
- 帝国理工学院(IC)研究人员设计了一种可以解决瘫痪的脑机设备
- java经典50题_JAVA经典算法50题(3)【面试+工作】
- VTK:可视化之RandomProbe
- VS2019 WPF制作OTA上位机(二)获取bin文件路径
- 京东抢购助手_[Windows] 京东极速抢购助手V2.0,支持京东健康+扫货抢购
- jQuery 的选择器 元素选择器
- C++/C--相对路径与绝对路径【转载】
- java 虚拟机类加载 及内存结构
- 20200126:(leetcode)三数之和 最接近的三数之和(含图解)
- bzoj 4950: [Wf2017]Mission Improbable(二分匹配)
- 26 JavaScript模块
- android+3.1.2+imagebutton监听,android Button ImageButton 差别
- php goeasy,如何使用GoEasy实现PHP与Websocket实时通信
- VSTOhowtoreferene.Net3.5(VSTO如何引用.NET3.5的外接程序)
- php flash 代码转换,php+flashpaper实现文档自动转换
- Selenium.Chrome.ChromeDriver指纹去除
- Excel在行上输入连续序号的3种方法的操作比较
- 数据化运营17 留存:如何通过数据、社交、内容手段提升用户留存?