need focus to stay on parent frame, rather than iframe - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

need focus to stay on parent frame, rather than iframe

londrum

11:57 am on Aug 22, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

i've been fiddling with this for a while and its become a bit of a head scratcher...

i have a page with an iframe at the top. and everything works great.
but there are also a load of links below the iframe (in the parent frame) which i link to through an anchor. a bit like this... www.example.com/page.html#subheading

when somebody clicks on one of this links, the page doesn't jump to the anchor like its supposed to, but stays where the iframe is. its as if the iframe always takes the focus.

i have discovered through a bit of fiddling with a sleep function that the page does actually jump to the anchor first of all, but then jumps straight back up to the iframe after it has finished loading.

i have tried waiting until the iframe loads and then putting this at the end

parent.document.getElementById('MyID').scrollIntoView(true);

but it doesnt work. does anyone know who to stop the iframe taking the focus with javascript? or maybe a way to scroll the parent frame to the anchor after it has loaded?

rainborick

2:21 pm on Aug 22, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I can envision several of the roadblocks that you've probably encountered, not to mention cross-browser issues, and I'm sure you've already considered the things I'd suggest. What happens if you do add parent.focus() to the iframe's onload()? What do you do when the browser has JavaScript disabled?

The solutions that occur to me all involve using an include() of some kind, rather than relying on <iframe>s and JavaScript because I think it's likely this is unsolvable. You're starting with cross-document security issues and then dealing with communication between page load/reload and then juggling cross-browser issues.

My first thought is, if you're on an Apache server, you could use Server Side Includes to replace the <iframe> and not even have to change the file names/URLs by setting .htaccess to parse .htm,.html documents.

londrum

3:51 pm on Aug 22, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

unfortunately i've tried that but its a no-go. i can't insert a big chunk of php into the parent page (which is what i need to build the content) because it's put together using a templating system, and php is blocked as a security measure. but i can insert html and javascript, hence the iframe.

i can't amend the templating system either, tried that too.

ps. i don't think cross-document security is an issue because everything in the iframe comes from the same site

rainborick

6:08 pm on Aug 22, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I actually meant Apache SSI's, as in , not PHP, but if you can't, you can't.

What about the parent.focus() in the iframe's onload()?

londrum

8:43 pm on Aug 22, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

doesnt seem to work. here is the code that i have come up with so far, if you want to have a look...

i put this in the iframe's

<head>

function movetoanchor(){

function graburl(name) {

name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

var regexS = "[\\?&]"+name+"=([^&#]*)";

var regex = new RegExp(regexS);

var results = regex.exec(parent.location.href);

if(results == null) {

return "";

} else {

return results[1];

var anchorid = graburl('p');

parent.focus();

parent.document.getElementById(anchorid).scrollIntoView(true);

the

graburl('p')

bit is grabbing the value of the query string 'p' in the parent's url, which just so happens to be the same value as the anchor that i'm trying to scroll to.
the parent's url is of this format:
http://www.example.com/page.html?p=blah#blah

this whole section is definitely returning the correct value (eg. 'blah'), because when i print it out in an alert box it is okay.

the anchor in the parent frame is like this

<a id="blah">

and i am triggering the whole thing with

<body onload="movetoanchor()">

in the iframe