缩小Google Docs侧边栏后消除空白区域的JS书签方案问询

问题背景 #

我在Google Docs中使用Google Apps Script侧边栏模拟onEdit()功能，实现用户高亮文本时修改其背景色。为了让侧边栏尽可能小，采用了一段JS书签代码将侧边栏宽度设为0px：

javascript:void(window.top.document.getElementsByClassName("script-application-sidebar")[0].style.width='0px')

但缩小侧边栏后，文档编辑器框架并未自动填充多出的空白区域。手动打开空白区域的检查元素再关闭后，编辑器框架会自动铺满。我尝试了以下书签代码但无效：

javascript:void(window.top.document.getElementbyId("docs-editor-container")[0].style.width='927px')

求能让编辑器框架自动铺满全屏的JS书签代码。

解决方案 #

问题根源是缩小侧边栏后，浏览器未触发编辑器容器的重绘/重排，而打开检查器会强制触发该过程。可通过以下两种方式实现自动铺满：

方案1：强制重绘并调整布局样式

使用这段书签代码，先隐藏侧边栏，再触发编辑器容器重排，同时调整相关布局元素的自适应样式：

javascript:void((function(){
  // 隐藏Apps Script侧边栏
  const sidebar = window.top.document.querySelector(".script-application-sidebar");
  if(sidebar) sidebar.style.width = '0px';
  // 处理编辑器容器
  const editorContainer = window.top.document.getElementById("docs-editor-container");
  if(editorContainer){
    // 清除固定宽度，恢复自适应
    editorContainer.style.width = '';
    // 触发浏览器重绘
    editorContainer.offsetHeight;
    // 调整外层布局容器的边距
    const docsContainer = window.top.document.querySelector(".docs-container");
    if(docsContainer) docsContainer.style.marginRight = '0px';
  }
})())

方案2：模拟窗口 resize 触发全局重排

如果方案1无效，可尝试触发窗口 resize 事件，模拟检查器带来的全局重排效果：

javascript:void((function(){
  // 隐藏侧边栏
  const sidebar = window.top.document.getElementsByClassName("script-application-sidebar")[0];
  if(sidebar) sidebar.style.width = '0px';
  // 触发窗口 resize 事件，强制重排
  window.top.dispatchEvent(new Event('resize'));
})())

注意事项 #

• 原代码存在拼写错误：getElementbyId应为getElementById，且该方法返回单个元素，无需添加[0]。
• 固定宽度（如927px）不具备通用性，不同屏幕尺寸下会失效，优先使用自适应的样式清除和重排触发方案。

内容的提问来源于stack exchange，提问作者jacob.in.nyc