我用的是臉書的“頁面插件”小工具。在臉書的頁面上，寫著:
如果你想在調整窗口大小時調整插件的寬度，你需要手動重新渲染插件。
我如何在不刷新頁面的情況下動態改變這個插件的寬度(例如，使用Firefox響應式視圖- CTRL+M快捷鍵)。
是的，我讀了這篇文章，但是沒有一個解決方案告訴我如何重新渲染插件。
對于JavaScript/jQuery方法，您可能希望在窗口上偵聽resize事件并重新加載臉書頁面插件Div容器。確保FB頁面插件被包裹在父div周圍，這樣我們可以在重新加載div時使用它的大小。
<div id="pageContainer">
<div class="fb-page" data- 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 >Facebook</a></blockquote></div></div>
</div>
$( window ).resize(function() {
var container_width = $('#pageContainer').width();
$('#pageContainer').html('<div class="fb-page" data- 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 );
FB.XFBML.parse();
});這個問題的解決方案是:
(function($){
var a = null;
$(window).resize(function(){
if(a != null) {
clearTimeout(a);
}
a = setTimeout(function(){
FB.XFBML.parse();
},1000)
})
})(jQuery)是的，facebook頁面插件(和其他他們的插件)只在頁面加載時呈現。如果這個插件被隱藏了(或者窗口在渲染后被調整了大小),你需要告訴FB rerender他的插件。這與調用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頁面插件
解決方案是:
FB.XFBML.parse();在將“隱藏的”div的內容添加到主div后，使用上面jsfiddle中的菜單，解決了我所有隱藏的facebook插件的問題。
將隱藏div中的內容追加到主div中的菜單
我要使用另一個菜單，這就是我要做的。
我用的是FB。xf XML . parse()；在我的函數中，在返回false之前；對于頁面、評論、贊，所有插件現在都在每次點擊菜單時被解析。
謝謝你。
使用上面答案中的代碼，下面的代碼對我有效:
<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 = "http://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>對jroi_web的優秀作品做了一些小的改進。
擺脫jQuery 使用addEventListener 如果容器元素顯示為‘none’(我在mobile上隱藏了FB)，就不要渲染了。 對初始頁面加載也使用render函數。 順便說一句，我從來不需要在調整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- 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 >Facebook</a> </blockquote> </div>';
container.innerHTML = fbHTML;
FB.XFBML.parse();
}
}
window.addEventListener('resize', renderFB);
document.addEventListener('DOMContentLoaded', renderFB);
</script>上一篇esp8266 json
下一篇python 自然常數e