iFrame content automatically grabs focus in web browser

Article Last Updated

This article applies to:

If you use an iFrame to embed a published Storyline course into a web page, you may find that the web page automatically scrolls down to the iFrame when it's viewed in Internet Explorer or Firefox.

This results from a browser conflict with code that allows keyboard commands to function as soon as a page loads. Use any of the following options to avoid this behavior:

Place the iFrame at the top of the web page

By placing the iFrame at the top of your web page, it won't need to scroll down to the embedded content.

Use a different web browser

Some web browsers, such as Google Chrome and Safari, do not exhibit this behavior. One option is to view the page with the embedded content in one of these browsers.

Modify the published output

Note: Modifying the published output is not officially supported by Articulate. Use discretion.

Another option is to comment out a section of code in the story.js file in your published course. Here's how:

  1. First, open the folder where your published output is located.
  2. Then open the story_content folder.
  3. Open the story.js file with a text editor, such as Notepad.
  4. Locate the following section of code:
    case "BW_RestoreFocus":
    	var oPlayer = GetPlayer();
    	
    	try
    	{
    		oPlayer.tabIndex = 0;
    		oPlayer.focus();
    	}
    	catch (e)
    	{
    	}
    	break;
  5. Comment out the section of code above by typing /* before it and */ after it.
  6. Save and close the story.js file.
  7. Upload the modified content to your web server. (Note: You may need to clear your browser cache after making the change to ensure that the updated content is delivered to your browser.)