获取 Facebook Embedded iframe 视频和帖子高度答案

【问题标题】：Get Facebook Embedded iframe video and post height获取 Facebook Embedded iframe 视频和帖子高度
【发布时间】：2016-12-23 15:17:02
【问题描述】：

我正在尝试在我的网页上获取嵌入的 facebook 视频和帖子的 iframe 高度。因为我嵌入了很多不同的帖子和视频，所以我只指定 iframe 的宽度，而不是高度。喜欢这里的代码：

对于视频：

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fbbcnews%2Fvideos%2F10153836161582217%2F&show_text=1&width=560" width="560" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

对于帖子：

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F9gag%2Fposts%2F10154878302591840&width=500" width="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

现在如果我只指定宽度，我会得到一个被切成两半的 iframe。Video example

我的问题是，对于嵌入的视频和帖子，有一种方法可以在内容渲染后获取内容的高度。有javascript的方式吗？或者我可以使用的 API 调用？

谢谢。

【问题讨论】：

如果你通过 JS SDK 嵌入它们，它们不会自动适应高度吗？（正如您应该做的那样，而不是将 iframe 元素直接放入您的页面。）
@CBroe 我想直接使用 iframe，这样加载时间会更快
好吧，你不能拥有一切。 iframe 内容是从不同的域加载的，因此您无法访问它来测量其高度。因此，如果你想让他们适应内容高度，你需要 Facebook 的“帮助”；并且这种帮助以 JS SDK 的形式提供。

标签： javascript facebook api iframe

【解决方案1】：

如果您的 iframe 的内容位于不同的域中，您将无法访问其内部。那将是跨站点脚本。

因此，最好的解决方案是将您的查询字符串中的height 传递给您src 的iframe 属性，并从其父框架中获取您的iframe 的高度。

示例如下：

var elm = document.getElementById('iframeFb');
console.log('iframe height is: ', elm.height);

&lt;iframe id="iframeFb" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fbbcnews%2Fvideos%2F10153836161582217%2F&amp;show_text=1&amp;width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"&gt;&lt;/iframe&gt;

【讨论】：

但是不同的帖子会有不同的高度，这取决于它拥有的文本数量或上下文，这不可能为所有嵌入的内容设置相同的高度。我正在尝试找到一种方法来动态调整高度。
@KChi 考虑根据您的内容为每个帖子创建调整高度的 iframe 代码，否则使用 JS SDK。如果您觉得我的回答有用，请在考虑投票时表示感谢 :) 谢谢！