iframe的高度百分比数学javascript

时间:2011-08-18 17:13:06

标签: javascript html iframe

这是交易...我有一个外部加载的iframe称为“radioiframe”,我有一个本地iframe与我的页面内容。正如您将注意到我在“radioiframe”中的src为空,这是因为源是通过javascript(代码结尾)加载的。所有的工作都很完美,但我遇到的问题是,当我在iframe上显示并按下我的内容并隐藏它时(溢出:隐藏在体内以防止doble滚动条)。我一直试图将它算出来,“radioiframe”的高度固定为34px,但“内容”高度是相对于显示器大小和页面内容。香港专业教育学院尝试用jQuery计算框架的高度,然后减去高度ou 34并将其设置在iframe上,但无济于事。 只是为了提醒一切正在运行,执行setSizes数学函数。

框架页面上的HTML。

<div id="radiodiv">
<iframe src="" id="radioiframe" height="34px" width="100%" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="no" allowtransparency="true" style="display:none;"></iframe></div>

<div id="contentdiv">   
<iframe src="home2.php" id="content" name="content" height="100%"  width="100%" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" vspace="0" hspace="0"></iframe></div>

<script type="text/javascript">
function setSizes() {
var containerHeight = $("#content").height();
document.getElementById('content').height = containerHeight - 34;
}
</script>

用于加载源码的Javascript:

function ShowSaburi (){
parent.document.getElementById('radioiframe').src = 'http://www.saburimusic.com/player.php';
parent.document.getElementById('radioiframe').style.display = 'block';
};

function ShowNero (){
parent.document.getElementById('radioiframe').src = 'http://www.radionero.com/player.php';
parent.document.getElementById('radioiframe').style.display = 'block';
};

function HideRadio (){
parent.document.getElementById('radioiframe').src = '';
parent.document.getElementById('radioiframe').style.display = 'none';
};

1 个答案:

答案 0 :(得分:0)

如何使用溢出设置滚动

来设置contentdiv样式
<div id="contentdiv" style="overflow: scroll;">   
    <iframe src="home2.php" id="content" name="content" height="200px"  width="100%" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" vspace="0" hspace="0"></iframe>
</div>

你可以将div的高度设置为窗口的最大高度减去34px的放射性图像。

希望这有帮助。

function ShowSaburi() {
// your methods
// add this
setContentHeight();
}

function setContentHeight() {
   var docHeight = $(document).height();
   if (docHeight){
      var contentHeight = docHeight - 40;
      $('#contentdiv').css({'height': contentHeight+ 'px'});
   }
} 

只是一个想法。