Question

我想在我的网页上获取嵌入式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调用？

感谢。

Answer 1

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

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

以下示例：

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

<iframe id="iframeFb" 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" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

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

1 个答案: