Jump to content

Iframe 30 sec refresh keeps stealing focus. How to stop?


Recommended Posts

I don't know much coding myself and would probably be considered a noob by the peeps standards here. Anyways, on my site (www.games4work.com) I have put my banners into iframe code and have set the meta refresh to 30 seconds. This seems to have really helped me actually start to make money off of my sites. I use it for more than just this site, but this is the site it's causing the biggest problem on. So people are playing a flash game and not always, but some banners or perhaps when certain keys are pushed while playing the flash game. The iframe steals the focus of the entire page. So if you are playing a flash game that uses keyboard controls and the iframe steals the focus then when you push the down or up arrow it scrolls the entire page up and down. You have to re-click the flash "window" to gain control back in the game.

I did some searching and found this page: [a href=\"http://www.w3schools.com/htmldom/dom_obj_iframe.asp\" target=\"_blank\"]http://www.w3schools.com/htmldom/dom_obj_iframe.asp[/a]

which says:

Method
blur() Removes focus from the iframe
focus() Gives focus to the iframe

Can somebody tell me how I use this (if this is what is going to work best) with my iframes so they don't steal the focus of the entire page?

I would appreciate any help you can provide since I've had to turn the refresh down from 30 secs to 5 minutes and will likely mean I'm losing money I could have otherwise made.

Thanks in advance for any help or direction you can give me.
Problem is, it's the intentional design (for accessibility reasons) that a frame gets focus when loaded. Every time the page refreshes, the page is loaded and gets focus. For Flash games that don't use the keyboard, this doesn't matter, since focus is restored when the mouse is clicked. But for games that use the keyboard, Flash won't register commands until focus is restored to the game.

What's worse, I'm not sure you can change focus between frames. You could try this:

[code]// Put this in the IFRAME(s).
<head>

<script type="text/javascript">
    function setfocus() {
        // Set ID to the ID associated with the embedded Flash object.
        document.getElementById('ID').focus();
    }
</script>

</head>

<body onload="javascript: setfocus();">

...

</body>[/code]

...no guarantees it will work, though. You could also change the way advertisements are changed, so that IFRAMES aren't used. Perhaps using a Javascript to change the banner and URL after a set delay.
I don't think Flash adds an ID by default. You'd just add one yourself, as so:

[code]<embed id="ID" ... >[/code]
...but that's an aside.

As for how to update the banner, there are a few options. You could do something like this:

[code]<div id="ads">
    <a href="www.somesite.com"><img src="ad.jpg" /></a>
</div>[/code]
...where your ad is put inside a DIV, then use the DOM property of innerHTML to change the DIV as needed. As so:

[code]document.getElementByID('ads').innerHTML="<a href=\"www.newsite.com\"><img src=\"newad.jpg\"></a>";[/code]
Or, you could assign a unique ID to the anchor tag and the image tag, and update them using the href and src properties, respectively:

[code]document.getElementByID('link').href="http://www.asite.com/";
document.getElementByID('banner').src="theadbanner.gif";[/code]
You would need to use the setTimeout function to cause the information to update either way, but it isn't a very complicated thing to do. It's commonly used for clocks and whatnot.
That looks like it might work, but I don't know much about coding other than following peoples instructions. My ad code is provided by an ad company so it's already in a script tag not site url and ad image. Can you help me with what exactly I need to put into the page code to get it to refresh every 30 seconds?
[!--quoteo(post=362904:date=Apr 8 2006, 09:21 PM:name=Gutspiller)--][div class=\'quotetop\']QUOTE(Gutspiller @ Apr 8 2006, 09:21 PM) [snapback]362904[/snapback][/div][div class=\'quotemain\'][!--quotec--]
That looks like it might work, but I don't know much about coding other than following peoples instructions. My ad code is provided by an ad company so it's already in a script tag not site url and ad image. Can you help me with what exactly I need to put into the page code to get it to refresh every 30 seconds?
[/quote]

[code]<script type="text/javascript">

setTimeout("myfunction()",1800000);

</script>[/code]
The above Javascript would call the function "myfunction" every 1800000 milliseconds -- every 30 minutes. We'll need two extra things: the first is an array of images and their matching links.

[code]// Produce two new arrays to hold the information.
var banners = new Array();
var links = new Array();

// The banners array holds the URLs of 4 banners.
banners[0] = "banner1.jpg";
banners[1] = "banner2.jpg";
banners[2] = "banner3.jpg";
banners[3] = "banner4.jpg";

// The links array holds the matching links for the banners array.
links[0] = "http://www.asite.com/";
links[1] = "http://www.anothersite.com/";
links[2] = "http://www.notasite.com/";
links[3] = "http://www.asdfghjkl.com/";[/code]
You would then need to have myfunction() look something like this:

[code]function myfunction() {
    // Update the banner image URL.
    document.getElementById('ad').src=banners[i];

    // Update the site the banner links to.
    document.getElementById('url').href=links[i];

    // Increment i so a different banner/link shows next time.
    i++;

    // If the variable i gets larger than the largest number in our arrays, set it back to 0 (reset the banner rotation).
    if(i > 3) {
        i = 0;
    }
}[/code]
There are a few problems; one, I can't be sure updating the banner won't steal focus (I haven't tested it). Second, if you don't produce the advertisement code yourself, you can't control if they add an ID to the banner or link. No ID, no updating with Javascript. :(
Is there another way to refresh? I don't have the specific links, I just need their ad code refreshed every 30 seconds and they handle what banner will be shown. Isn't it possible to use something that just refreshes itself every 30 seconds and within the code I insert the ad code?

If nothing else, couldn't something peppered with AJAX work? (from what I know about how it can dynamically change things on a page without reloading the whole page, this seems like it would be small compared to what AJAX is capable of.)

Can you give me more help? I would relaly appreciate it. I was making some good advertising money finally with my banner refreshing... but after I saw that it was interfering with content I had to remove it.

Thanks for any help anybody can provide me.
  • 4 weeks later...
Can I still get some help on this? I think this will work, but I don't have specific links as mentioned above for the image and the url for the image to link to, instead it's a chunk of code that needs to be rerun from my ad company without refreshing the whole page.
maybe this will work?

[!--html--][div class=\'htmltop\']HTML[/div][div class=\'htmlmain\'][!--html1--]<[color=blue]iframe id[/color]="[color=orange]ad[/color]"><[color=blue]/iframe[/color]>[!--html2--][/div][!--html3--]

[code]setTimeout(document.getElementById('ad').reload();document.focus();,30*60*60); [/code]
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.