700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Iframe 自适应高度并实时监控高度变化的js代码【javascript】

Iframe 自适应高度并实时监控高度变化的js代码【javascript】

时间:2023-10-22 06:43:01

相关推荐

Iframe 自适应高度并实时监控高度变化的js代码【javascript】

web前端|js教程

Iframe,自适应高度

web前端-js教程

google N次 + 百度M次 + 试验了1605次之后(听说农药1605就是实验了这么多次后出来的),得出下面成果,在IE7及Firefox3里试了下还能凑合着用用!

1、首先给出个Iframe。

asp excel 源码下载,vscode 多大,ubuntu e信,tomcat内部,sqlite免费数据,服务器免费试用,商城日历插件,eb前端框架视频,lofter 爬虫,php 求模,seo如何快速入门,网站模板扒皮者怎么用,网页软键盘,discuz 模板 手机,页面表格样式,天人文章管理系统破解,如何看别人小程序代码lzw

<iframe

marginheight="0"

marginwidth="0"

height="100"

width="1000"

frameborder="0"

scrolling="no"

src="xxxxx.html">

2、然后看看怎么获取Iframe中的页面的高度。

其实最麻烦的就是怎么让获取的高度准确,不同的方式不同的浏览器中获取到的值都会不一样!晕啊~~。参考了多方意见得出以下javascript函数(doc参数为window.document对象):

酷炫建站公司源码,vscode+炫酷效果,Ubuntu源码大小,tomcat 管理网页,兰西爬虫防治,html 按钮调用php,天津seo优化课程招商加盟,网站右侧滑动导航菜单,手机考试系统html模板lzw

function getDocHeight(doc)

{

//在IE中doc.body.scrollHeight的可信度最高

//在Firefox中,doc.height就可以了

var docHei = 0;

var scrollHei;//scrollHeight

var offsetHei;//offsetHeight,包含了边框的高度

if (doc.height)

{

//Firefox支持此属性,IE不支持

docHei = doc.height;

}

else if (doc.body)

{

//在IE中,只有body.scrollHeight是与当前页面的高度一致的,

//其他的跳转几次后就会变的混乱,不知道是依照什么取的值!

//似乎跟包含它的窗口的大小变化有关

if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;

if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;

}

else if(doc.documentElement)

{

if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;

if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;

}

/*

docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符!

*/

return docHei;

}

3、最后修改Iframe的高度,并用一个定时器来不间断检查它包含的页面的高度变化。

android 备份 源码,ubuntu+网关+dns,tomcat多实例不推荐,骷髅岛爬虫,版本库网站程序(php),十一seolzw

function doReSize()

{

var iframeWin = window.frames[ifrm];

var iframeEl = window.document.getElementById? window.document.getElementById(ifrm): document.all? document.all[ifrm]: null;

if ( iframeEl && iframeWin )

{

var docHei = getDocHeight(iframeWin.document);

if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + px;

}

else if(iframeEl)

{

var docHei = getDocHeight(iframeEl.contentDocument);

if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + px;

}

}

function runResizeTask()

{

doReSize();

setTimeout("runResizeTask()",500);//每隔半秒执行一次

}

runResizeTask();

在这里就没有去考虑被包含的页面中是否有折叠、隐藏/展现的情况了!

完整js代码

function getDocHeight(doc){

//在IE中doc.body.scrollHeight的可信度最高

//在Firefox中,doc.height就可以了

var docHei = 0;

var scrollHei;//scrollHeight

var offsetHei;//offsetHeight,包含了边框的高度

if (doc.height){

//Firefox支持此属性,IE不支持

docHei = doc.height;

}

else if (doc.body){

//在IE中,只有body.scrollHeight是与当前页面的高度一致的,

//其他的跳转几次后就会变的混乱,不知道是依照什么取的值!

//似乎跟包含它的窗口的大小变化有关

if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;

if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;

}

else if(doc.documentElement){

if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;

if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;

}

/*

docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符!

*/

return docHei;

}

function doReSize(){

var iframeWin = window.frames[Main];

var iframeEl = window.document.getElementById? window.document.getElementById(Main): document.all? document.all[Main]: null;

if ( iframeEl && iframeWin ){

var docHei = getDocHeight(iframeWin.document);

if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + px;

}

else if(iframeEl){

var docHei = getDocHeight(iframeEl.contentDocument);

if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + px;

}

}

function runResizeTask(){

doReSize();

setTimeout("runResizeTask()",1000);//每隔1秒执行一次

}

runResizeTask();

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。