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

如果要从加载在iframe中的页面中调整iframe的大小,请尝试此操作。它似乎至少在本地工作:

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

我假设页面和iframe都是您的,并且具有相同的“来源”。

我会用 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);

iFrAM:

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