如何在包含頁面內調整iframe的大小？

我想訪問我的頁面所在的iframe並調整其大小。順便說一下，我正在使用JavaScript。如何在包含頁面內調整iframe的大小？

It's something like parent and height or offsetHeight.

<iframe src="mypage.asp" height="400" width="400" ></iframe>

而在MyPage.asp並我做某事類似這樣的：

var h = // new height; 
parent.height = h;

但它不是好嗎？知道更多的人？

來源

2010-03-24 poo

如果您要從加載到iframe中的頁面內調整iframe的大小，請嘗試此操作。它似乎至少在本地工作：

function doIt() { 
    var elem = window.parent.document.getElementById('myIframe'); // the id of your iframe of course 
    elem.style.height = '40em'; 
}

我假設頁面和你的iframe是你的，並有相同的「起源」。

來源

2010-03-24 09:34:29 npup

調整大小實際上只是elem.height或elem.width。 – poo

我認爲元素的'height'屬性實際上不被支持（至少在xhtml中）。試試也會查找一些確認。無論如何，我更喜歡通過CSS規則來做樣式，所以這就是我操縱這些的原因。 – npup

可以說，在某些情況下更好地向它添加一個css類，而不是寫入內聯樣式。我想這取決於人們想要身高的「動態」。 – npup

我會解決這個使用window.postMessage。這將從iframe發送消息到包含iframe的父頁面。然後，您可以更新父級中的高度。試圖從iframe中設置高度會給瀏覽器XSS預防造成很大的限制。

一個很好的例子是here：

父：

// Every two seconds.... 
setInterval(function() { 
    // Send the message "Hello" to the parent window 
    // ...if the domain is still "davidwalsh.name" 
    parent.postMessage("Hello","http://davidwalsh.name"); 
},1000);

的iframe：

// Create IE + others compatible event handler 
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
var eventer = window[eventMethod]; 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

// Listen to message from child window 
eventer(messageEvent,function(e) { 
    console.log('parent received message!: ',e.data); 
},false);

來源

2013-04-19 10:36:17 RickyA

真棒，效果很好，我注意到它與瀏覽器兼容，可以返回到IE8 。 –

如何在包含頁面內調整iframe的大小？

回答

相關問題