I'm writing a TamperMonkey script to tweak the UI of a website I don't control, which uses frameset
and frame
elements for its primary layout.
I'm trying to increase the border
attribute of of one of the framesets to make it easier to resize the frames (larger target for grabbing with the mouse). But even though my script sets the correct attribute to my desired value, the browser doesn't update the rendered frameset until it has to redraw it for some other reason, such as changing the browser window size. In my TamperMonkey script, how can I get the browser to immediately render the page after changing the frameset's border
attribute?
Here's the code fragment which sets the border
attribute value:
const borderWidth = document.querySelector('html > frameset > frameset')?.attributes?.border;
if (borderWidth) {
borderWidth.value = 10;
}
This does exactly what it should. It successfully locates the correct frameset element and sets the border
attribute to 10. (Confirmed by Inspecting with dev tools.) Running it in the console also works, immediately updating the frameset element's border
attribute in the Element view.
I found a list of properties and methods which "should" trigger a reflow. I've tried accessing offsetWidth
in both the frameset
and both of its child frames
via the console, and various other methods which are listed as triggering reflow, but so far none of them actually cause the changed border
value to be applied.
Should I be configuring the border
value some other way, rather than writing to the attribute in the DOM, in order to trigger the reflow "naturally"? Is there an API I can call to force re-rendering of the frameset border?
I'm using Chromium-based Edge, 105.0.1343.33.
I forced the reflow by updating my JavaScript to add an empty frame element to the frameset that I wanted to re-render, and then immediately removed the empty frame. This triggers the reflow that I needed.