我正在加载一个iframe中的aspx网页。Iframe中的内容的高度可以大于Iframe的高度。iframe不应该有滚动条。

我在iframe里面有一个包装器div标签,基本上是所有的内容。我写了一些jQuery来实现调整大小:

$("#TB_window", window.parent.document).height($("body").height() + 50);

在哪里 TB_window是包含Iframe的div。

Body - iframe中aspx的Body标签。

该脚本附加到iframe内容。我从父页面获得TB_window元素。虽然这在Chrome上工作得很好,但在Firefox中TB_window崩溃了。我真的不明白为什么会发生这种情况。


当前回答

我发现接受的答案是不够的,因为X-FRAME-OPTIONS: Allow-From在safari或chrome中不支持。相反,我们采用了不同的方法,这可以从Disqus的Ben Vinegar的演讲中找到。其思想是在父窗口中添加一个事件侦听器,然后在iframe中使用窗口。postMessage发送一个事件给父进程,告诉它做一些事情(调整iframe的大小)。

所以在父文档中,添加一个事件监听器:

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

在iframe中,写一个函数来发布消息:

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

最后,在iframe中,给body标签添加一个onLoad来触发resize函数:

<body onLoad="resize();">

其他回答

在我的项目中,有一个要求,我们已经使动态屏幕,如仪表板的对齐,而加载,它应该显示在整个页面上,应该得到动态调整,如果用户是最大化或调整浏览器的窗口。 为此,我创建了url并使用iframe打开一个用cognos BI编写的动态报告。在jsp中,我们必须嵌入BI报表。我已经使用iframe将该报告嵌入到jsp中。下面的代码在我的情况下工作。

<iframe src= ${cognosUrl} onload="this.style.height=(this.contentDocument.body.scrollHeight+30) +'px';" scrolling="no" style="width: 100%; min-height: 900px; border: none; overflow: hidden; height: 30px;"></iframe>

为了增加窗口底部似乎被切断的部分,特别是当你没有滚动时,我使用了:

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }
jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

其他答案不适合我,所以我做了一些改变。希望这能有所帮助

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});

我发现接受的答案是不够的,因为X-FRAME-OPTIONS: Allow-From在safari或chrome中不支持。相反,我们采用了不同的方法,这可以从Disqus的Ben Vinegar的演讲中找到。其思想是在父窗口中添加一个事件侦听器,然后在iframe中使用窗口。postMessage发送一个事件给父进程,告诉它做一些事情(调整iframe的大小)。

所以在父文档中,添加一个事件监听器:

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

在iframe中,写一个函数来发布消息:

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

最后,在iframe中,给body标签添加一个onLoad来触发resize函数:

<body onLoad="resize();">