如何扩展 iFrame/将内容从 iFrame 移动到 div？ [复制]答案

【问题标题】：How to extend iFrame / move contents from iFrame to div? [duplicate]如何扩展 iFrame/将内容从 iFrame 移动到 div？ [复制]
【发布时间】：2014-06-23 04:22:08
【问题描述】：

我有一组将页面内容加载到 iframe 的链接。该 iframe 只有父 div 的高度，如果需要，不会扩展页面，而不是 iframe 显示垂直滚动条。我不希望滚动条在那里，我希望 iframe “扩展”（这是不可能的）-> 每次加载到父 div 时从 iframe 移动内容。
例如：Welcome.html 的高度为 2000 像素，但窗口只有 900 像素，并且 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。”

【问题讨论】：

它给了我：未捕获的安全错误：阻止原点为“null”的帧访问原点为“null”的帧。协议、域和端口必须匹配。也许问题是我在 Chrome 上使用本地文件。编辑：我将它上传到服务器上并没有显示错误，但内容仍保留在带有滚动条的拉伸 iframe 中
您是在运行服务器还是仅在 chrome 上使用本地文件？

标签： javascript jquery html iframe

【解决方案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 事件上调用函数。否则将无法正确计算高度。

【讨论】：

【解决方案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;。

如果是跨域内容就比较复杂了。如果您需要，请告诉我（并且您必须控制该跨源内容）。

【讨论】：

【解决方案3】：

你应该这样做

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

      }   
  }

有效

【讨论】：