Question

我想访问我的页面所在的iframe并调整其大小。顺便说一下，我在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预防限制。

一个很好的例子是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);

如何在包含页面内调整iframe的大小？

2 个答案: