将 iFrame 高度调整为内容高度答案

【问题标题】：Size iFrame height to content height将 iFrame 高度调整为内容高度
【发布时间】：2014-11-06 04:21:53
【问题描述】：

我正在 iFrame 中加载站点跨域。我想调整 iFrame 的大小以匹配我正在加载的网站的高度。 Sniply 正是这样做的，我想模仿这个功能。有人知道他们在这里表演的是什么魔法吗？

http://snip.ly/Z9nv#https://forums.eveonline.com/default.aspx?g=posts&m=5009807

似乎他们不仅从跨域站点访问文档，而且使用不同的协议 (HTTP/HTTPS)。有什么见解吗？看起来他们可能会将 iFrame 的高度设置为某个不可能的高值，并在滚动到底部时以某种方式停止滚动。帮助！

编辑：一些额外的细节.. 我在后端使用一些插件对我尝试提交的 URL 进行一些分析： https://github.com/mikeal/request 和 https://github.com/tmpvar/jsdom。有没有我可以使用这两个插件之一来获取文档高度的请求？

EDIT2：我不想在 iframe 内滚动 - 我希望它与它包含的文档的高度相匹配。

【问题讨论】：

标签： javascript html node.js

【解决方案1】：

我认为你必须设置 css。如果有更多 iframe，您可以使用一个类。

iframe {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 0;
height: 100%;
min-width: 100%;
width: 10px;
-webkit-overflow-scrolling: touch;
overflow: scroll;
}

您必须将自己的元素设置为position:fixed。

【讨论】：

但是，这不会将框架调整为它包含的文档的大小。出于某种原因，我不想在 iframe 内滚动 :)
我同意你的看法。我认为我们必须编写一些 js 来查找 iframe 中文档的高度，然后调整当前窗口的高度。
不幸的是，在尝试使用 https:// 从 http:// 站点访问 iframe 时，这是不可能的（据我所知）。 Sniply 解决了这个问题 - 我想知道怎么做！ :P

【解决方案2】：

将 CSS 设置为此似乎有效

iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 0;
  height: 100%;
  min-width: 100%;
  width: 10px;
}

这是一个现场样本

iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 0;
  height: 100%;
  min-width: 100%;
  width: 10px;
}

<div>test</div>
<iframe src="https://slashdot.org"></iframe>

【讨论】：