Javascript inside editor's content iframe

Hi all,

I’m facing a javascript issue in the backend editor and I’d would like some help understanding how JS works inside the WP editor.

What I need is rather simple and works on frontend: add an attribute to html tag.
It is done with this JS code:

document.body.parentNode.setAttribute('color-scheme', 'light');

Note: I managed to make it work with Cwicly code block or a snippet plugin, no difference.

Now, in backend editor, I can’t make it work, either with Cwicly or a snippet plugin.

In the first case, Cwicly block, it seems JS code is not executed at all (tried to output in console with no result, and couldn’t find the script in page source).

In the second case, with a plugin, the code is executed but it seems that since the script is not included in the page content iframe, it alters the main html tag and not the iframe one.
(Tried in vain with different WP hooks like wp_footer, enqueue_block_assets, etc, combining them…)

Also note that if I execute the code in the Cwicly block with the ‘play’ button, it alters the main html tag like with a snippet plugin, so the JS seems to be declared and executed outside the iframe too.

So, how I can alter the html tag inside the page content iframe instead of the main html tag?

Can’t we execute JS at page load from a Cwicly code block inside the editor?

Is this a WP limitation? Technical, or for security or other reasons?

Thx in advance!!!

Maybe this thread can give you some more context, also check Louis’ reply:

1 Like