窗口Resize时刷新指定Div而非整页的实现方案求助

步骤1：给目标Div添加唯一ID #

先给你的Facebook页面容器加上ID，方便精准定位：

<div id="fb-page-container" class="fb-page" data-href="https://www.facebook.com/woodsyhollow" data-width="100%" data-hide-cover="false" data-show-facepile="false"></div>

注意：把data-width改成100%，让插件默认占满容器宽度

步骤2：替换Resize事件处理脚本 #

移除原来的整页刷新代码，换成以下脚本——核心是通过Facebook SDK重新渲染指定容器内的插件，同时加入防抖避免频繁触发：

// 防抖函数，避免resize事件频繁执行
function debounce(func, delay) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 重新渲染Facebook页面插件的函数
function reRenderFBPage() {
  const container = document.getElementById('fb-page-container');
  if (!container) return;
  
  // 保存原有的data属性
  const href = container.getAttribute('data-href');
  const hideCover = container.getAttribute('data-hide-cover');
  const showFacepile = container.getAttribute('data-show-facepile');
  
  // 清空容器并重新插入FB插件的原始代码
  container.innerHTML = `<div class="fb-page" data-href="${href}" data-width="100%" data-hide-cover="${hideCover}" data-show-facepile="${showFacepile}"></div>`;
  
  // 调用Facebook SDK的解析方法，重新渲染插件
  if (window.FB) {
    FB.XFBML.parse(container);
  }
}

// 绑定防抖后的resize事件
window.addEventListener('resize', debounce(reRenderFBPage, 200));

关键说明 #

• 防抖函数：设置200毫秒延迟，确保只有在窗口调整停止后才执行渲染，避免频繁操作影响性能
• SDK依赖：确保你的页面已经正确加载了Facebook的JavaScript SDK（通常是页面底部引入的类似https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v18.0的脚本）
• 移动端优化：这个方法不会触发整页刷新，彻底解决滚动误触刷新的问题

内容的提问来源于stack exchange，提问作者joshmrodg