Attempting to response to different 'types' of breakpoints resize triggers.

Problem/Motivation

I am using this module to successfully respond to re-size actions using the standard, recommended code...

window.addEventListener('themeBreakpoint:changed',
  function (event) {
     location.reload();
  });

This is doing exactly what I want which is to RELOAD THE WHOLE page.

I am doing this targeted reloading because I am also using the Block Breakpoint module to selectively show/hide blocks according to viewport width.

That's all great, the two modules work together very reliably but my situation is a little more complicated by the fact that I am also making extensive use of the Iframe module to embed content and my IFRAMEs frequently contain 'SNAP to FULL SCREEN' links using simple code like this...

function toggleFullScreen() {
 ...RequestFullscreen(…
 screen.orientation.lock('landscape').catch(function(error) {});
...
}

I've drawn this out here in an attempt to as clear as I can about what I'm attempting and failing at! ...

The upshot of all this that everything work until I use a SNAP to FULL SCREEN link and the browser duly follows my orders to the letter and goes full screen but then my own Drupal site JS listener kicks in, does a damn page reload and snaps everything back again ! ;-(

So, what I could use some advice on is how to adjust my Drupal site JS code to somehow 'know' when a resize request came from within the an iframe and ignore it even if it did cross a breakpoint.

As you may gather, after all the years here with Drupal, I a still very much a novice front ender but I'm making progress.

Can anyone help out here?

Thanks