.click function for an object inside an iframe

Question

I'm starting in JS and JQuery, and I just need a bit of help. I want to scroll a page (this is ok), but when a button is clicked. This button has the class "testelement" and is inside an iframe. So I want the main page to be scrolled when a button inside the iframe is clicked. I tried the following code, but it doesn't work. I'm sure it's a stupid mistake at the first line, but I don't know...

$('iframe').contents().find('.testelement').click(function() {
    $('body').animate({ scrollTop: 1000 }, 2000);
});

Thanks

Answer 1

如果点击确实有效，则应考虑以这种方式进行动画处理

$("html, body").animate({ scrollTop: "1000px" }, 2000);

Answer 2

What you need to do is reference the parent window. See this link window.parent , for more information. Using jQuery, you can try the following. Hope this helps:

$('body', window.parent.document).animate({ scrollTop: 1000 }, 2000);;

EDIT :

From the parent window, you can access the button in the iframe (assuming same origin), like this---pretty much just what you wrote above:

$("#MyIframe").contents().find("#scroller").click(function(){
    $('body').animate({ scrollTop: 1000 }, 2000);
}

'#scroller' is the ID of the button on the iframe (or whatever unique selector you want to use).

Answer 3

Thanks to everybody, I finally solved my problem !

I asked this question because I tried, and it was impossible to click any button in the iframe. I tried so many things... I became crazy when I discovered that I just had to put it on a server instead of running it locally. I felt so stupid !

FOR EVERY USER OF ADOBE WEB GENERATING SOFTWARES (like ADOBE MUSE, ADOBE EDGE) :

If we run a preview of our work, the software creates a "fake" server, and it works great. But when we generate the final html code, problems happens... It's really often a problem that happens because we're running our page locally.

I hope I helped people