動態更改IFRAME高度

如何動態修復Google趨勢圖的高度問題。舉一個例子來看下面代碼的輸出。動態更改IFRAME高度

<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

上的jsfiddle：iframe的

和jQuery的設置高度

$（ '＃idval'）http://jsfiddle.net/yzw8Y/

來源

2013-05-13 Prakash

*有關示例，請看下面代碼的輸出：*爲什麼不在jsFiddle上構建它，以便我們可以做到這一點？ – George 2013-05-13 09:52:16

jsFiddle鏈接添加 – Prakash 2013-05-13 09:54:15

可能的重複[根據內容高度調整iframe高度]（http://stackoverflow.com/questions/525992/resize-iframe-height-according-to-content-height-in-it） – 2013-05-13 10:11:02

-2

集ID的CSS（ '高度'， '800像素'） ;

來源

2013-05-13 09:53:12 mathew

這相當於'width =「800」'。我需要根據內部內容動態設置IFRAME的高度。 – Prakash 2013-05-13 10:15:41

爲此您設置了最大寬度。無需設置寬度。基於內容的寬度將擴展到最大寬度 – mathew 2013-05-14 07:14:44

對不起，我的意思是說'height =「800」' – Prakash 2013-05-14 07:53:58

我沒有測試它，但這可以工作。

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

來源

2013-05-13 10:06:07

我從iframe源代碼中刪除了'height =「320」'和'＆h = 320'，這個工作很完美。 – Prakash 2013-05-13 10:19:07

我真的很抱歉我以前的評論。我在兩個IFRAME上都嘗試過，但它不起作用。 [鏈接]（http://jsfiddle.net/zvuLM/） – Prakash 2013-05-14 07:56:11

動態更改IFRAME高度

回答

相關問題