javascript - 获取 Facebook 嵌入式 iframe 视频和帖子高度

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 内容位于不同的域中，您将无法访问其内部结构。这就是跨站点脚本编写。

因此，最好的解决方案是在 iframe 的 src 属性中传递查询字符串中的 height 并获取您的高度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>