动态改变IFRAME高度

Changing IFRAME height dynamically

本文关键字:高度 IFRAME 改变 动态      更新时间:2023-09-26

如何动态修复Google趋势图的高度问题?作为示例,请看下面代码的输出:

<iframe width="600" height="320" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=css-showcase&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=600&h=320" style="border: none;"></iframe>
<hr>
first contents
<hr>
<iframe width="600" height="320" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=html5&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=600&h=320" style="border: none;"></iframe>
<hr>
second contents

on jsFiddle: http://jsfiddle.net/yzw8Y/

我没有测试它,但这可以工作。

function autoResize(id)
{
   var newheight;
   newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
   document.getElementById(id).height=newheight + "px";
}
<iframe id="frame1" onload="autoResize('frame1')" ... >

set id for iframe

在jquery中设置高度

$ (' # idval ') . css(‘高’,‘800 px);