iframe内嵌的页面有隐藏层,iframe不能撑开隐藏层 5
一开始是想要实现iframe根据内钳页面高度自适应高度,现在通过js可以自适应高度了,但是发现一个问题就是,如果内嵌页面有隐藏层,如果隐藏层高度比刚载入页面时初始高度高,...
一开始是想要实现iframe根据内钳页面高度自适应高度,现在通过js可以自适应高度了,但是发现一个问题就是,如果内嵌页面有隐藏层,如果隐藏层高度比刚载入页面时初始高度高,iframe还是不能够适应这个高度,它只是适应了页面初次载入时的高度,怎样使点击显示隐藏层时,frame高度显示所有内容,包括隐藏层内的内容?
<div class="top" style="width:100%;height:60px; background:#CC6; float:left;"></div>
<div class="left" style="width:20%;height:500px; background: #CCF; float:left;"></div>
<div id="main_right" style="width:80%; height:auto; float:left; background:#9FF;">
<iframe style=" width:100%; float:left;" onLoad="setIframeHeight(this.id)" id="ifrm" name="ifrm" scrolling="no" frameborder="0" onload="this.height=100;" src="right.html"></iframe>
<script type="text/javascript">
function getData(ifm){
document.getElementById("ifrm").src = ifm+'.html';
}
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;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
</script>
</div>
<div class="foot" style="width:100%;height:60px; background: #FF6; float:left;"></div> 展开
<div class="top" style="width:100%;height:60px; background:#CC6; float:left;"></div>
<div class="left" style="width:20%;height:500px; background: #CCF; float:left;"></div>
<div id="main_right" style="width:80%; height:auto; float:left; background:#9FF;">
<iframe style=" width:100%; float:left;" onLoad="setIframeHeight(this.id)" id="ifrm" name="ifrm" scrolling="no" frameborder="0" onload="this.height=100;" src="right.html"></iframe>
<script type="text/javascript">
function getData(ifm){
document.getElementById("ifrm").src = ifm+'.html';
}
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;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:
ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height ...
ifrm.style.height = getDocHeight( doc ) + 4 + "px";
ifrm.style.visibility = 'visible';
}
</script>
</div>
<div class="foot" style="width:100%;height:60px; background: #FF6; float:left;"></div> 展开
1个回答
展开全部
/**
* 把一个div放在屏幕的最中央
* @param id div的id
*/
function setDivCenter(id) {
showDiv(id, "1");
getO(id).style.left = (((parseInt(getWinSize()[0])) - parseInt(getO(id).offsetWidth)) / 2) + "px";
getO(id).style.top = (((parseInt(getWinSize()[1])) - parseInt(getO(id).offsetHeight)) / 2) + "px";
}
/**
* 获得对象
* @param id 对象的id(表单元素和其他标签都可以)
* @return Object
*/
function getO(id) {
return document.getElementById(id);
}
/**
* 设置div的显示或隐藏(其他元素也可以)
* @param id 层的id或其他元素的id
* @param type 1为显示0为隐藏
*/
function showDiv(id, type) {
if (getO(id) != null) {
var status = ("1" == type) ? "block" : "none";
getO(id).style.display = status;
}
}
/**
* 获得当前窗体的大小(width,height)
* @return Array
*/
function getWinSize() {
var width = parseInt(document.documentElement.clientWidth);
var height = parseInt(document.documentElement.clientHeight);
return new Array(width, height);
}
* 把一个div放在屏幕的最中央
* @param id div的id
*/
function setDivCenter(id) {
showDiv(id, "1");
getO(id).style.left = (((parseInt(getWinSize()[0])) - parseInt(getO(id).offsetWidth)) / 2) + "px";
getO(id).style.top = (((parseInt(getWinSize()[1])) - parseInt(getO(id).offsetHeight)) / 2) + "px";
}
/**
* 获得对象
* @param id 对象的id(表单元素和其他标签都可以)
* @return Object
*/
function getO(id) {
return document.getElementById(id);
}
/**
* 设置div的显示或隐藏(其他元素也可以)
* @param id 层的id或其他元素的id
* @param type 1为显示0为隐藏
*/
function showDiv(id, type) {
if (getO(id) != null) {
var status = ("1" == type) ? "block" : "none";
getO(id).style.display = status;
}
}
/**
* 获得当前窗体的大小(width,height)
* @return Array
*/
function getWinSize() {
var width = parseInt(document.documentElement.clientWidth);
var height = parseInt(document.documentElement.clientHeight);
return new Array(width, height);
}
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询