獲取Facebook嵌入式iframe視頻和帖子高度

我正在嘗試獲取嵌入式Facebook視頻和帖子在我的網頁上的iframe高度。由於我嵌入了很多不同的帖子和視頻，因此我只有指定iframe的寬度，但不是高度。喜歡這裏的代碼：獲取Facebook嵌入式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調用？

謝謝。

來源

2016-08-17 KChi

不要那些自動適應高度，如果你通過JS SDK嵌入他們？（正如你應該的，而不是直接將iframe元素放入頁面中） – CBroe

@CBroe我想直接使用iframe，因此加載時間會更快 – KChi

嗯，你不能全部擁有。 iframe內容是從不同的域加載的，因此您無法訪問它來測量它的高度。因此，如果你想讓他們適應內容的高度，你需要Facebook的「幫助」;並且幫助以JS SDK的形式出現。 – CBroe

-1

如果iframe的內容位於不同的域中，則無法訪問其內部。這將是跨站點腳本。

所以最好的解決辦法是通過height在查詢字符串中的你iframesrc屬性，並從其父框架讓你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>

來源

2016-08-17 06:18:23 GibboK

但是，不同的帖子會根據文本或上下文的大小而具有不同的高度，因此無法爲所有嵌入的內容設置相同的高度。我試圖找到一種方法，以便我可以動態調整高度。 – KChi

@KChi考慮創建iframes代碼，並根據您的內容爲每個帖子調整高度，否則使用JS SDK。如果您發現我的答案有用，請考慮投票表達您的感謝:)謝謝！ – GibboK

獲取Facebook嵌入式iframe視頻和帖子高度

回答

相關問題