Question

我想要在模态iframe中显示多个链接页面。页面大小不同，我希望能够在加载每个新页面时调整iframe的大小。我已经查看了几个jquery插件来创建iframe，但无法弄清楚如何调整其中任何一个。我目前正在尝试使用prettyPhoto和nyroModal，但我愿意接受建议。我只需要让它工作。我也不是很擅长JavaScript，但我正在努力学习。

注意：我的所有网页都在我的网络服务器上，因此跨网域没有问题。

感谢所有快速回复。我要去睡觉了，但是当我醒来的时候，我期待着尝试你的建议。

Answer 1

尝试将其放入iframe：

document.onload = function() {
    var i = parent.document.getElementById('myIframe');
    i.style.width = document.body.offsetWidth+"px";
    i.style.height = document.body.offsetHeight+"px";
}

Answer 2

将页面加载到iframe时，您可能会遇到跨域问题。从父级JS访问iframe中的页面被阻止。

如果您想轻松完成，请跟踪代码中iframe的内容并手动调整为硬编码尺寸。

创建要用于每个页面的维度数组并使用此功能：

function() {
    var i = document.getElementById('myIframe');
    var sr=i.src;
    i.style.width = myDimensionsArray[sr][w]+"px";
    i.style.height = myDimensionsArray[sr][h]+"px";
}

Answer 3

您可以使用postMessage。在您的iframe中写下：

document.body.onload=function(){
  parent.postMessage("resize_me", "*");
}

在您的主页：

window.addEventListener("message", function(e){
  if(e.data=="resize_me") {
    //resize the iframe
  }
}

Answer 4

这里有2个案例：

在模态打开后加载iframe
在模态打开之前加载iframe

function resizeIframe(obj){ obj.style.height = 0; obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } $(".modal").on('shown.bs.modal', function () { resizeIframe(document.getElementById(IFRAME_ID)); }); window.onload=function(){ document.getElementById('IFRAME_ID').addEventListener('load', function(){ resizeIframe(document.getElementById(IFRAME_ID)); }); }

如果是

加载iframe时，iframe会调整大小
当加载iframe时，由于模态是不可见的，因此不会调整大小，因此需要再次调整模型的大小。

如何在新页面加载时调整模式iframe的大小？

4 个答案: