Question

所以我正在使用新的Facebook插件（页面插件），并且很难让它在窗口调整大小时做出响应。

我已经设置了选项data-adapt-container-width =“true”，但只有在页面加载/重新加载时才会触发。

请关注我的JSFiddle：http://jsfiddle.net/29zgc790/（尝试使用exporer，如果不行，请尝试我的plunker：http://plnkr.co/edit/IPnjpJUXxkO4WTLFTTW0?p=preview）我已将插件的起始宽度设置为max（500px），但是我希望在容器（窗口）变得小于该特定时间的插件时触发插件的重新加载。

我正在考虑像：

$(window).resize(function () {
    //Do the reload of plugin
});

希望你们有一个能够以正确方式引导我的解决方案。

Answer 1

嵌入生成的iframe：

获取父宽度并将其设置为iframe和iframe的src属性

$(window).resize(function() {
  //Do the reload of plugin
  var new_width = $("#facebook").parent().width();
  $("#facebook").css("width", new_width);
  var url = $('#facebook').attr('src').split("&width=");
  url = url[0] + '&width=' + new_width;
  $('#facebook').attr('src', url);
});

Answer 2

所以在阅读了facebook web sdk的文档后，我发现了这个重新加载iframe的小函数。

FB.XFBML.parse();

https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse

这解决了我的问题，但是@LucaGiardina也提供了一个很好的解决方案，但我认为如果存在，它总是使用内置函数的上帝实践。

Answer 3

经过几天的努力，我提出了一个可行的解决方案！我实际上只是为了分享才注册的：）

在此处复制页面插件的iframe代码： Facebook Page Plugin（转到“获取代码”，然后单击刚刚打开的窗口顶部的“ iFrame”。）
将代码粘贴到类 fb-column 的 div 中的 html 中strong>，然后删除 width 和 src 属性（将 src 属性的值粘贴-长链接-在其他位置，您将需要以后再说吧

将此代码添加到您的主要 .js 文件中（用于计算包装盒尺寸和调用该功能的信用转到Mugo Web

function resizeFBPlugin() {
  //calculate parent box width
  var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
  // set the src and replace the actual width with the calculated width. 
  document.getElementById("fb-column").src = //paster link from iFrame here. Be sure to keep everything as it is, only replace the number after &width= with container_width
  // it should look something like this: 'https://www.facebook.com....&width='+container_width+'&height=......';
  // NOTE: take note of the use of apostrophes and + signs
  //set the width of the iframe
  document.getElementById("fb-column").width = container_width;
};

// call the function on resize and on window load

$(window).on('resize', function() {
setTimeout(function(){resizeFBPlugin()}, 500);
});

$(window).on('load', function() {
setTimeout(function(){resizeFBPlugin()}, 1500);
});

就是这样！现在，您有了一个完全响应的Facebook页面插件（当然，最小宽度为180px，最大宽度为500px。

顺便说一句，Twitter插件运行完美。我不知道为什么Facebook决定不解决此问题...我想他们没有钱给合适的开发人员:)

Answer 4

我找到了一些解决方案，但我认为最好的解决方案至少是对我来说是，在某个响应中设置fb-comment-wrapper的父标签，然后使用内置于CSS数据宽度中的Facebook：

<div class="btn">CONTAINER</div>

使Facebook插件响应

4 个答案: