CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
flipnotic
flipnotic

Reputation: 69

Using IFrame and Javascript to scroll parent page

I'm looking for some help on what should be a basic script (I think), but I can't quite figure it out myself..

I have a page, with an iFrame, displaying a page that I only have access to the header. I'd like to make it so that when someone clicks ANY link ( tag) in the iFrame window, it scrolls my parent page to the top (or a specific location). Is this possible?

Edit: Also, if it's important, I'm already using David Bradshaw's iFrame resizer script to resize the frame on the fly, which uses postmessage to communicate frame->page. https://github.com/davidjbradshaw/iframe-resizer

Edit2: The parent window and iframe window are cross-domain

Upvotes: 1

Views: 2795

Answers (1)

Leeish
Leeish

Reputation: 5213

See Trigger events in iframe's parent window

Add some JS to your iframe page:

$(document).ready(function(){
    $('a').click(function(){
        window.parent.$(window.parent.document).trigger('scroll');
    });
});

Then on the parent page:

$(document).bind('complete', function(){
    //Add scroll code.
});

You could use post message to do something similar, but if you control both pages and they are on the same domain, this should work. If they are on different domains (which you didn't specify) you are stuck using postMessage which I believe isn't entirely cross-browser complient and therefore won't work on all settings and there really isn't a fallback.

If you want to use postMessage and you are using a plugin, just do something like

window.addEventListener("message",function(event){
    if(event.origin == 'http://yourdomain.com'){
        if(event.data == 'messageString'){
            //Add scroll code
        }
    }
});

Upvotes: 1

Related Questions