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

时间:2014-05-06 13:52:05

标签: javascript jquery html iframe

我有一组链接可以将页面内容加载到iframe。 iframe只有父div的高度,如果需要则不会展开页面,而不是iframe显示垂直滚动条。 我不希望滚动条在那里,我希望iframe“扩展”(这是不可能的) - >每次加载到父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。”

3 个答案:

答案 0 :(得分:3)

确保您正在使用服务器,并且您加载的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事件上调用函数。否则它将无法正确计算高度。

答案 1 :(得分:0)

这取决于各种因素。

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;

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

答案 2 :(得分:0)

你应该做的

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

      }   
  }

有效