Using IFrame and Javascript to scroll parent page

Question

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

http://stackoverflow.com/questions/935127/how-to-access-parent-iframe-from-javascript — CodeHunter, Sep 26 '14 at 17:14
The latest version of iframe-resizer as option to scroll the page and also supports in page linking. — David Bradshaw, Mar 15 '15 at 20:34

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

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
        }
    }
});

edited May 23 '17 at 12:23

Community

1
1

answered Sep 26 '14 at 17:10

Leeish

5,203
2
17
45

Sorry, I added an edit. I forgot to mention that this is cross-domain. – flipnotic Sep 26 '14 at 18:04
Cross domain you are stuck using post message. There really isn't any other way I believe. – Leeish Sep 26 '14 at 18:23
Here is a good article that explains all that: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage It's pretty simple actually. – Leeish Sep 26 '14 at 18:24

Using IFrame and Javascript to scroll parent page

1 Answers1