Question

我有一组链接可以将页面内容加载到iframe。 iframe只有父div的高度，如果需要则不会展开页面，而不是iframe显示垂直滚动条。我不希望滚动条在那里，我希望iframe“扩展”（这是不可能的） - ＆gt;每次加载到父div时，都会从iframe移动内容例如： Welcome.html 的高度为2000px，但窗口只有900px，iframe显示滚动条。我希望 Welcome.html 的内容扩展页面。

<a href="pages/welcome.html" target="ifrMain">Welcome</a>
<a href="anotherLongPage.html" target="ifrMain">Another page</a>
<div id="divMain"><iframe id="ifrMain" src="pages/welcome.html"></iframe></div>

我不介意使用jQuery。类似“当iframe的内容发生变化时，将它们移动到父div。”

Answer 1

确保您正在使用服务器，并且您加载的iframe使用相同的协议。以下是您的问题的代码

Javascript将包含在页面的头部

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/...
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
    html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    console.log(ifrm)
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
    ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

</script>

HTML

 <iframe onload="setIframeHeight(this.id)" id="myframe" width="300" height="300" src="youpathtopagehere"></iframe>

您应该只在onload事件上调用函数。否则它将无法正确计算高度。

Answer 2

这取决于各种因素。

Internet Explorer 8及更高版本（以及其他现代浏览器）具有postMessage API。在iFrame的内容中，您运行parent.postMessage(JSON.stringify({action: 'resize', height: 2000}, "*");并在您运行的父级（您的页面）中运行 -

$(window).bind(
 "message",
 function (e)
 {
  var data = JSON.parse(e.originalEvent.data);
  if (data.action === "resize")
  {
   // You must initialize iFrameElement first,
   // or just get it here using document.getElementById or something.
   iFrameElement.height = data.height;
  }
 });

如果iFrame显示相同的原始内容且您必须支持Internet Explorer 7，则为iFrame指定name属性，iFrame可以调用window.parent.document.getElementsByTagName(window.name)[0].height = 2000;。

如果它是跨源内容则更复杂。如果您需要，请告诉我（并且您必须控制该原始内容）。

Answer 3

你应该做的

  function iframeLoaded() {
      var iFrameID = document.getElementById('ifMain');
      var wrapper = document.getElementById('wrapper');
      if(iFrameID) {
        $("#divMain").css("height", $(iFrameID.contentWindow.document).height()+"px");

      }   
  }

有效

如何将iFrame /移动内容从iFrame扩展到div？

3 个答案: