在某些情况下，Facebook 页面插件不响应数据高度

Question

我正在玩Facebook页面插件，并且玩得很开心。我正在尝试做的是将插件的"数据高度"属性设置为等于窗口加载时另一个div 的高度。我使用Facebook页面插件创建器生成了此HTML：

<div class="facebookHousing col-md-4 col-xs-12 col-sm-12">
<div class="fb-page" data-href="https://www.facebook.com/FACEBOOKPAGEURL/"
data-tabs="timeline"
data-width="500"
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="true"
data-show-facepile="false"
data-height="">
</div>
</div>

这是我正在使用的jQuery：

var windowSize = $(window).innerWidth();
$(window).on('load', function () {
var newsSize = $('.newsHousing').height();
if (windowSize <= 479) {
$('.fb-page').attr('data-height', 250);
}
else if (windowSize >= 480 && windowSize <= 767) {
$('.fb-page').attr('data-height', 300);
}
else if (windowSize >= 768 && windowSize <= 991) {
$('.fb-page').attr('data-height', 500);
}
else {
$('.fb-page').attr('data-height', newsSize);
}
});   

我的大部分初始测试都是在谷歌浏览器中进行的，为了模拟不同的屏幕尺寸，我使用"切换设备工具栏"选项。但是，我在使用此功能时看到非常奇怪的行为。

当我打开设备工具栏时，jQuery按预期工作。如果 newsSize 等于 1200px，则插件的高度将设置为 1200px，并按预期呈现。当我关闭设备工具栏并重试时，插件的高度始终默认为 500，并且根本不考虑变量。

Chrome的"切换设备工具栏"是什么让jQuery以与关闭完全不同的方式运行？我设置了各种断点以确保 newsSize 始终有一个值，我认为插件没有理由忽略这个值。

Answer 1

@CBore是对的，我对这个插件如何异步加载有一个根本性的误解。这是我最终将代码更改为的内容，现在它正在工作：

$(window).on('load', function () {
var windowSize = $(window).innerWidth();
if (windowSize <= 479) {
$('.fb-page').attr('data-height', 250);
renderFacebookPlugin();
}
else if (windowSize >= 480 && windowSize <= 767) {
$('.fb-page').attr('data-height', 300);
renderFacebookPlugin();
}
else if (windowSize >= 768 && windowSize <= 991) {
$('.fb-page').attr('data-height', 500);
renderFacebookPlugin();
}
else {          
setTimeout(function () { changeFBPagePlugin() }, 500);            
}  
});   
renderFacebookPlugin = function () {
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
changeFBPagePlugin = function () {
var container_height = $('.newsHousing').height().toFixed(0);
if (!isNaN(container_height)) {
$('.fb-page').attr('data-height', container_height);            
}
else {
$('.fb-page').attr('data-height', 500);
}
renderFacebookPlugin();
}