javascript Facebook页面插件-重新呈现/动态更改宽度(响应式/ RWD)

voase2hg  于 2023-06-04  发布在  Java
关注(0)|答案(6)|浏览(485)

我正在使用Facebook的“页面插件”小部件。在Facebook's page上,它是这样写的:
如果你想在调整窗口大小时调整插件的宽度,你需要手动重新渲染插件。
如何在不刷新页面的情况下动态更改此插件的宽度(例如,使用Firefox responsive view- CTRL+M快捷键)。
是的,我读过THIS的帖子,但这些解决方案都没有告诉如何重新渲染插件。

qacovj5a

qacovj5a1#

对于JavaScript/jQuery方法,您可能需要侦听窗口调整大小事件并重新加载Facebook Page Plugin Div容器。确保FB Page插件是围绕父div的,这样我们就可以在重新加载div时使用它的大小。

<div id="pageContainer">
    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>
</div>

$( window ).resize(function() {
    var container_width = $('#pageContainer').width();    
    $('#pageContainer').html('<div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="' + container_width + '" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>');
    FB.XFBML.parse();    
});
l7wslrjt

l7wslrjt2#

该问题的解决方案是:

(function($){
    var a = null;
    $(window).resize(function(){
        if(a != null) {
            clearTimeout(a);
        }

        a = setTimeout(function(){
            FB.XFBML.parse();
        },1000)
    })
})(jQuery)
pengsaosao

pengsaosao3#

是的,facebook页面插件(和其他插件)只在页面加载时呈现。如果这个插件被隐藏了(或者渲染后窗口被调整了大小),你需要告诉FB重新渲染他的插件。这与在显示/调整大小后调用FB.XFBML.parse()非常匹配。
你可以这样做:
在HTML中:

<div class="fb-page" data-href="{url}" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="{url}"><a href="{url}">{title}</a></blockquote></div></div>

在Javascript中:

function changeFBPagePlugin(width, height, url) {

    if (!isNaN(width) && !isNaN(height)) {
        $(".fb-page").attr("data-width", width).attr("data-height", height);
    }
    if (url) {
        $(".fb-page").attr("data-href", url);
    }
    FB.XFBML.parse();
 }

只要调用重新渲染(如果你想显示插件后隐藏)

changeFBPagePlugin(355, 244);

changeFBPagePlugin(355, 244, "https://facebook.com/PageNameHere");

如果你想改变其他FB页面插件

ikfrs5lh

ikfrs5lh4#

解决方案是:

FB.XFBML.parse();

解决了我的问题,所有隐藏的facebook插件后,追加“隐藏”div的内容到一个主div,使用菜单从jsfiddle以上。
Menu appending content from hidden divs into a main div
我打算用另一个菜单,这就是我要做的。
我在我的功能中使用了FB.XFBML.parse();,在return false;之前,它可以完美地用于页面,评论,喜欢,现在每次单击菜单时都会解析所有插件。
谢谢你。

xa9qqrwz

xa9qqrwz5#

使用上面的答案中的代码,下面的代码对我来说是有效的:

<div id="fb-root"></div>
<!--
  From https://developers.facebook.com/docs/plugins/page-plugin/
-->
<div id="Facebook-Widget">
  <div class="fb-page" data-href="{url}" data-tabs="timeline"
       data-small-header="false" data-adapt-container-width="true"
       data-hide-cover="false" data-show-facepile="true">
    <blockquote cite="{url}" class="fb-xfbml-parse-ignore"><a
        href="{url}">{title}</a></blockquote>
  </div>
</div>

<script type="text/javascript">

  var Example =
    {
      foFuncTimeOut: null,

      //----------------------------------------------------------------------------------------------------
      initializeRoutines: function ()
      {
        // Facebook sidebar
        // From https://developers.facebook.com/docs/plugins/page-plugin/
        (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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

      },

      // -------------------------------------------------------------------------------------------------------------------
      setupFacebook: function ()
      {
        var loWidget = jQuery('#Facebook-Widget');

        if (loWidget.length == 0)
        {
          return;
        }

        Example.resizeFacebook(loWidget);
        jQuery(window).resize(function ()
        {
          Example.resizeFacebook(loWidget);
        });
      },

      // -------------------------------------------------------------------------------------------------------------------
      // From http://stackoverflow.com/questions/30083986/facebook-page-plugin-rerender-change-width-dynamically-responsive-rwd
      resizeFacebook: function (toWidget)
      {
        if (Routines.foFuncTimeOut != null)
        {
          clearTimeout(Routines.foFuncTimeOut);
        }

        Routines.foFuncTimeOut = setTimeout(function ()
        {
          // Query the block above the Facebook widget.
          var lnWidth = jQuery('#block-views-block-blog-management-blog-listing-block').width();
          if (lnWidth < 180)
          {
            lnWidth = 180;
          }
          if (lnWidth > 500)
          {
            lnWidth = 500;
          }

          var lnHeight = (jQuery(window).width() >= 768) ? 1200 : 700;

          toWidget.css('width', lnWidth + 'px');
          toWidget.css('height', lnHeight + 'px');

          var loFB = toWidget.find('.fb-page');

          loFB.css('width', lnWidth + 'px');
          loFB.css('height', lnHeight + 'px');

          // data-width & data-height only accept whole numbers.
          loFB.attr('data-width', Math.floor(lnWidth));
          loFB.attr('data-height', Math.floor(lnHeight));

          if (typeof FB !== 'undefined')
          {
            FB.XFBML.parse();
          }

        }, 1000);

      },

      //----------------------------------------------------------------------------------------------------
    };

  Example.initializeRoutines();
  Example.setupFacebook();

</script>
lxkprmvk

lxkprmvk6#

对jroi_web的优秀工作做了一些小的改进。

  • 摆脱jQuery
  • 使用addEventListener
  • 如果容器元素是display 'none'(我在移动的上隐藏了FB),就不要麻烦渲染了。
  • 在初始页面加载时也使用render函数。
  • 顺便说一句,我从来没有需要一个debounce对FB的大小。
<div id="myFBContainer"></div>

<script>
function renderFB() {
  var container = document.getElementById('myFBContainer');
  if (window.getComputedStyle(container).display !== 'none') {
    var width = container.offsetWidth;
    const fbHTML = '<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="' + width + '" data-height="" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" > <blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore" > <a href="https://www.facebook.com/facebook">Facebook</a> </blockquote> </div>';
    container.innerHTML = fbHTML;
    FB.XFBML.parse();
  }
}
window.addEventListener('resize', renderFB);
document.addEventListener('DOMContentLoaded', renderFB);

</script>

相关问题