Как изменить размер фрейма внутри содержащей страницы?

Question

Я хочу получить доступ к фрейму, в котором находится моя страница, и изменить его размер. Кстати, я делаю это в JavaScript.

Это что-то вроде родителя и роста или offsetHeight.

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

И в mypage.asp я делаю что-то подобное:

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

Но не все в порядке? Кто-нибудь еще, кто знает больше?

Answer 1

Попробуйте, если вы хотите изменить размер iframe со страницы, загруженной в ваш iframe. Кажется, работает локально, по крайней мере:

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

Я предполагаю, что и страница, и ваш iframe принадлежат вам и имеют одинаковое "происхождение".

Answer 2

Я бы решил это, используя window.postMessage. Это отправляет сообщение из iframe на родительскую страницу, содержащую iframe. Затем вы можете обновить высоту в родительском. Попытка установить высоту изнутри iframe приводит к очень неприятным ограничениям для предотвращения XSS в браузере.

Хороший пример: здесь :

Родитель:

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