动态更改IFRAME高度

时间:2013-05-13 09:49:49

标签: javascript jquery html css

如何动态修复Google Trend图表的高度问题。 有关示例,请查看以下代码的输出。

<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/

2 个答案:

答案 0 :(得分:1)

我没有对它进行测试,但这可行。

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')" ... >

答案 1 :(得分:-2)

为iframe设置ID

并在jquery中设置高度

$( '#idval')的CSS( '身高', '800像素');