最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Javascript使iframe自适应高度实例
时间:2015-08-07 编辑:简简单单 来源:一聚教程网
工作中我们遇到了iframe嵌入页面高度自适应的问题。因为我们不知道所加载的iframe内容页面会有多高,又不想在页面上出现难看的滚动条,这个时候我们可以使用Javascript来动态让iframe自适应高度。
准备工作
我们准备一个主页面a.html,以及两个用于嵌入iframe的页面分别为iframeH.html和iframeH1.html,内容可以自己随便加,实际应用中可能是后台生成的内容。
为了演示,我们在主页面a.html中加入如下代码:
我们要实现的是,分别点击两个按钮,iframe中加载不同的内容,iframe中不能出现滚动条。
Javascript
首先我们使用Javascript动态改变iframe的src值,即分别点击两个按钮时,iframe加载不同的页面内容。代码中按钮button分别调用了自定义函数getData()就实现了切换内容的效果。
function getData(ifm){
document.getElementById("ifrm").src = ifm+'.html';
}
然后,我们来关注iframe里的内容,因为我们事先不知道iframe的内容高度,如果先设置好iframe的高度height值,很可能当页面内容超长时会出现滚动条,这不是我们想要的。那么我们使用Javascript来动态获取iframe页面高度,然后设置iframe的高度。
在iframe完全加载后即onload,调用setIframeHeight(),iframe内容加载完成后,可获取iframe的高度值,然后重新设置iframe的高度,以下是整理好的代码:
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.; // reset to minimal height ...
ifrm.style.px";
ifrm.style.visibility = 'visible';
}
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
Javascript代码:
下面这个兼容性更好一些
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'));
};
只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码,我们一般为了不污染html代码,建议使用上面的代码。
多个iframe的情况下
演示三
针对知道的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自适应高度
跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。
a.html中包含iframe:
在c.html中加入如下代码:
最后,agent.html中放入一段js:
agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)
注意本文谈到的iframe自适应以及上一篇文章中的iframe操作dom都是基于同域下的操作,即在相同域名下实现的,那么如果在不同域名下即跨域是不能这样操作的。关于iframe跨域操作相关介绍请关注本站下一期文章介绍
-
上一个: js用户注册实现手机验证码和倒计时
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31