Question

我正在玩Facebook页面插件，并且我有一段时间了。我想要做的是将插件的'data-height'属性设置为等于窗口负载上另一个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);
    }
});

我在Google Chrome中进行了大部分初步测试，并且为了模拟不同的屏幕尺寸，我使用了“切换设备工具栏”选项。但是，我在使用此功能时看到了非常奇怪的行为。

当我打开设备工具栏时，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();
}

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

1 个答案: