建站知识
网站设计知识 网站建设知识 网络营销知识 微信资讯 常见问题 网站备案 近期客户网站建设套餐
标准型网站建设 精美型网站建设 营销型网站建设 高端品牌网站建设 电子商务型网站建设 行业门户型网站建设 手机网站建设 微信网站建设怎样让超过iframe框架高度限定自动隐藏呢?
来源:征帆网络 作者:ymars 日期:2014-12-11
征帆网络小编最近在排版时发现iframe框架中的表单超过其框架高度后不知道应该怎么被自动隐藏,相信也有其他朋友同样遇到过这种问题,那么我们就一起来探究下应该怎样实现这个问题吧,以下是小编经过千辛万苦(有点夸大了啊,嘻嘻)才找到的一个解决方法:
<script type="text/javascript">
$(document).ready(function()
{
// Set specific variable to represent all iframe tags.
var iFrames = document.getElementsByTagName_r('iframe');
// Resize heights.
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
// Set inline style to equal the body height of the iframed content.
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
}
}
// Check if browser is Safari or Opera.
if ($.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$('iframe').load(function()
{
setTimeout(iResize, 0);
}
);
// Safari and Opera need a kick-start.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$('iframe').load(function()
{
// Set inline style to equal the body height of the iframed content.
if(this.contentWindow.document.body.offsetHeight>1000)
{
this.style.height = 700 + 'px';//此处为最小高度的设置
}else{
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
}
}
);
}
}
);
</script>
看的懂么?哈哈,其实也不用看懂,只要把上述文件外加一个jquery文件一起加载下,你会发现你想要的效果已经出现了...
<script type="text/javascript">
$(document).ready(function()
{
// Set specific variable to represent all iframe tags.
var iFrames = document.getElementsByTagName_r('iframe');
// Resize heights.
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
// Set inline style to equal the body height of the iframed content.
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
}
}
// Check if browser is Safari or Opera.
if ($.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$('iframe').load(function()
{
setTimeout(iResize, 0);
}
);
// Safari and Opera need a kick-start.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$('iframe').load(function()
{
// Set inline style to equal the body height of the iframed content.
if(this.contentWindow.document.body.offsetHeight>1000)
{
this.style.height = 700 + 'px';//此处为最小高度的设置
}else{
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
}
}
);
}
}
);
</script>
看的懂么?哈哈,其实也不用看懂,只要把上述文件外加一个jquery文件一起加载下,你会发现你想要的效果已经出现了...
上一篇:网站设计师如何揣摩客户的设计要求
下一篇:为什么要使用CSS设计网页?
相关文章列表