在TamperMonkey脚本中修改frameset的border后，如何触发页面重排？

编写TamperMonkey脚本调整某非受控网站UI，该网站以frameset和frame为核心布局。尝试增大其中一个frameset的border属性值（提升框架调整的鼠标抓取区域），但修改后浏览器不会立即渲染更新，仅在窗口大小变化等触发重排的操作后才生效。已尝试访问offsetWidth等常规触发重排的方法，均无效。使用基于Chromium的Edge 105.0.1343.33浏览器。

原修改代码片段：

const borderWidth = document.querySelector('html > frameset > frameset')?.attributes?.border;

if (borderWidth) {
    borderWidth.value = 10;
}

解决方案 #

1. 正确修改border属性（核心修复） #

直接修改DOM元素的属性而非属性节点的value值，因为直接操作attributes节点的value不会触发浏览器的属性变更检测，自然不会触发渲染更新。推荐两种方式：

方式A：使用setAttribute

const targetFrameset = document.querySelector('html > frameset > frameset');
if (targetFrameset) {
    targetFrameset.setAttribute('border', '10');
}

方式B：直接赋值DOM属性

const targetFrameset = document.querySelector('html > frameset > frameset');
if (targetFrameset) {
    targetFrameset.border = '10';
}

2. 强制触发frameset重绘/重排 #

如果上述方法仍不生效，可通过强制触发布局更新的方式让浏览器重新渲染frameset：

方法A：读取布局属性触发重排

const targetFrameset = document.querySelector('html > frameset > frameset');
if (targetFrameset) {
    targetFrameset.setAttribute('border', '10');
    // 读取offsetHeight强制触发重排
    void targetFrameset.offsetHeight;
}

方法B：临时修改display属性

const targetFrameset = document.querySelector('html > frameset > frameset');
if (targetFrameset) {
    targetFrameset.setAttribute('border', '10');
    // 临时切换display触发重绘
    const originalDisplay = targetFrameset.style.display;
    targetFrameset.style.display = 'none';
    void targetFrameset.offsetHeight; // 触发重排
    targetFrameset.style.display = originalDisplay;
}

方法C：利用frameset布局特性触发更新

frameset的布局依赖rows或cols属性，重新赋值该属性可强制触发布局更新：

const targetFrameset = document.querySelector('html > frameset > frameset');
if (targetFrameset) {
    targetFrameset.setAttribute('border', '10');
    // 重新设置rows/cols触发布局刷新
    if (targetFrameset.rows) {
        targetFrameset.rows = targetFrameset.rows;
    } else if (targetFrameset.cols) {
        targetFrameset.cols = targetFrameset.cols;
    }
}

3. 确保脚本运行时机 #

在TamperMonkey脚本头部添加@run-at document-idle，确保脚本在页面（包括frameset）完全加载后执行：

// ==UserScript==
// @name         调整Frameset边框
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  增大frameset边框以方便调整框架大小
// @author       You
// @match        目标网站URL
// @run-at       document-idle
// @grant        none
// ==/UserScript==

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