Overcoming iframes That Grab Web Page Focus

by Rahemin Nanji

This article shows you a workaround for those situations where a pesky iframe grabs your web page's focus.

You've embedded a video, audio clip, or document into your web page using the <iframe> tag. But when you go to reload the web page, you notice that the page now scrolls down to the place where your embedded object sits.

What's happening in this case is that the iframe is grabbing the focus of your web page.

In many situations when you embed content and objects using the iframe tag, you don't have access to modify the contents of the iframe source. For example, this can occur when you are provided the embed code from Google Docs or YouTube.

The workaround presented here is use a JavaScript function that forces the web page to scroll back to the top after the web page has finished loading all of its elements. The solution is implemented in two parts.

First, we make use of the JavaScript statement window.scrollTo(x,y) and wrap into a JavaScript function. We then place this function in the <head> section of our HTML document:

<head>
...
<script language="JavaScript" type="text/JavaScript">
function scrollToTop() {
  window.scrollTo(0,0);
}
</script>
...
</head>

We now call this function using the onload="JavaScriptCode" in the <body> of our HTML document:

<body onload="scrollToTop()">

Depending on the size of the object that is in the iframe, you may notice the web page scrolling to the location of the embedded object, pausing as its contents load, and then scrolling back to the top as a result of the function we just wrote.

In its current state, perhaps this solution may not be the most elegant. But hopefully it does serve as a useful workaround and a starting point for further customization.

SOME OF OUR CLIENTS AND AFFILIATES