Javascript 使Facebook插件具有响应性

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

我已经设置了选项data adapt container width=“true”，但这仅在页面加载/重新加载时触发

请使用我的JSFIDLE：（在exporer中试用，如果不起作用，请试用我的plunker:），我已经将插件的开始宽度设置为最大值（500px），但我想在容器（窗口）变得比插件小时触发插件的重新加载

我在想这样的事情：

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

---

希望你们能想出一个解决方案，以正确的方式指导我。

嵌入生成的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);
});

---

嵌入生成的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);
});

---

因此，在阅读了FacebookWebSDK的文档之后，我发现了这个重新加载iframe的小函数

FB.XFBML.parse();

---

这解决了我的问题，但是@LucaGiardina也是一个很好的解决方案，但我认为如果存在内置函数，那么使用内置函数始终是一种天经地义的做法。

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

FB.XFBML.parse();

---

这解决了我的问题，但是@LucaGiardina也是一个很好的解决方案，但是我认为如果存在内置函数的话，使用内置函数一直是上帝的做法。

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

在此处复制页面插件的iframe代码： （转到“获取代码”，然后单击刚刚打开的窗口顶部的“iFrame”。）

用classfb列将代码粘贴到div中的html，然后删除宽度和src属性（粘贴src属性的值-长链接-其他地方，稍后需要）

将此代码添加到主.js文件中（计算框大小和调用函数的功劳归于

就是这样！你现在有了一个完全响应的Facebook页面插件（当然，在最小180px和最大500px的宽度范围内）

---

顺便说一句，Twitter插件工作得很好。我不知道Facebook为什么决定不解决这个问题……我想他们没有足够的钱给合适的开发者：）

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

在此处复制页面插件的iframe代码： （转到“获取代码”，然后单击刚刚打开的窗口顶部的“iFrame”。）

用classfb列将代码粘贴到div中的html，然后删除宽度和src属性（粘贴src属性的值-长链接-其他地方，稍后需要）

将此代码添加到主.js文件中（计算框大小和调用函数的功劳归于

就是这样！你现在有了一个完全响应的Facebook页面插件（当然，在最小180px和最大500px的宽度范围内）

---

顺便说一句，Twitter插件工作得很好。我不知道Facebook为什么决定不解决这个问题……我想他们没有足够的钱给合适的开发者：）

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

---

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

你在exploerer中试过小提琴吗？我试过你的代码，它可以用于重新加载iframe，但代码片段信息不会重新发送，这意味着容器不会调整大小。Plunker可以工作。我建议创建一个外部文件。你的页面将加载一个包含所有facebook代码的iframe，调整大小后它将重新加载该页面o所有你需要的代码。一个上帝的观点，但我认为如果我需要加载“两个页面”，会有让页面变得沉重的风险每一个reszis。你可以在javascript上进行，并使其无需重新加载即可响应。或者删除并重新添加重新加载时所需的所有脚本。或者检查fb developer中是否有这样的脚本，而无需触发facebook脚本中的函数：）只需使用iframe即可。您只需要将链接编辑到iframe src中。将样式宽度设置为“开始”，以获取父元素宽度。你在爆炸器里试过小提琴吗？我尝试了你的代码，它可以用于重新加载iframe，但代码片段信息不会重新发送，这意味着容器不会调整大小。Plunker可以工作。。我建议创建一个外部文件。你的页面将加载一个包含所有facebook代码的iframe，在调整页面大小时，它将重新加载该页面，以便获得你所需的所有代码。这是一个很好的观点，但如果我每次重新加载“两个页面”，我会看到页面变得很重的风险。你可以在javascript上完成此操作，并使其在没有任何重新加载的情况下持续响应。。或者删除并重新添加重新加载时需要的所有脚本。。或者检查是否有fb开发者可以在不触发facebook脚本中的函数的情况下进行开发：）只使用iframe。您只需要将链接编辑到iframe src中。将样式宽度设置为“开始”，以获取父元素宽度。您好，您不需要计算任何容器大小，因为插件将占用父容器的整个空间。您需要做的是在出现window.resize with FB.XFBML.parse（）时重新加载插件；为此，你