iFrame stealing focus

Legacy Evolve Announcements
1

I am working on a course that contains an iframe with embedded content from Captivate. The iFrame is stealing focus on the page, meaning that the iframe and content within is where the page is going directly to and not starting at the top of the page. Can anyone help me figure how to fix this?

2

This happens to me too :frowning:

3

@Matt_Leathes I’m having this same issue with an embedded Storyline iFrame. Is there anything we can do to prevent autoscroll down the page to an iFrame?

I’ve tried editing my Storyline JavaScript to send a postMessage to Evolve, but it wasn’t recognized by Evolve.

4

It’s hard for me to answer that since the cause of the autoscroll will be in the Storyline content i.e. it’s not something Evolve is doing.

Have you checked it’s not the same issue you were running into here?

5

I’m wondering whether it might be possible to use a postmessage script to communicate to the parent page to disable autoscroll, or if there’s an Evolve setting that could help? It sounds like postmessage scripts are limited to completion tracking, but I wondered if there might be another solution as I saw a few folks had posted in the forum with this same issue over the years.

The SuppressAnalytics fix worked beautifully for the completion tracking issue we were having! But we’re still having the autoscroll issue even with SuppressAnalytics set to True.

6

Unfortunately it’s not possible for the parent page to disable autoscroll since it’s not initiating it - it’s the content of the iframe that’s doing it. The only real solutions are:

  • track down whatever in Storyline is doing it and stop it from doing that
  • add some sort of ‘click-to-play’ screen/poster image into the storyline content
7

If anyone else runs into this issue, I found a fix!

Adding this code above the </body> header in the index.html file disabled the auto-focus on the Storyline iFrame:

<script>

(function() {

    // 1. Physically block the iframe from moving the parent scrollbar

    const blockScroll = (e) => {

        if (window.parent && window.parent !== window) {

            // This prevents the 'focus' event from triggering a scroll jump

            window.scrollTo(0, 0);

        }

    };

 

    // 2. Wrap the focus method to force "preventScroll"

    const originalFocus = HTMLElement.prototype.focus;

    HTMLElement.prototype.focus = function(options) {

        const safeOptions = options || {};

        safeOptions.preventScroll = true;

        originalFocus.call(this, safeOptions);

    };

 

    // 3. Force the focus back to the Evolve header if a jump is detected

    window.addEventListener('load', () => {

        setTimeout(() => {

            if (window.scrollY !== 0) {

                window.scrollTo(0, 0);

            }

        }, 500); // Wait for bootstrapper.min.js to finish its initial jump

    });

})();

</script>
1 Like