让Facebook插件响应
所以我正在使用新的Facebook插件（页面插件），并且很难让它在窗口resize时做出响应。
我已经设置了选项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 }); 希望你们有一个能够以正确方式引导我的解决方案。
嵌入生成的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); });
所以在阅读了facebook web sdk的文档后，我发现了这个重新加载iframe的小函数。
FB.XFBML.parse();
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
这解决了我的问题，但是@LucaGiardina也提供了一个很好的解决方案，但我认为如果存在，它总是使用内置函数的上帝实践。
经过几天努力实现这一目标，我想出了一个有效的解决方案！ 我实际上只注册分享它:)
- 复制页面插件的iframe代码： Facebook页面插件 （转到“获取代码”，然后单击刚刚打开的窗口顶部的“iFrame”。）
- 使用类fb-column将代码粘贴到div内的html中 ，然后删除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宽度内。
BTW，Twitter插件运行完美。 我不知道为什么Facebook决定不解决这个问题…我想他们没有合适的开发者的钱:)