iFrame jQuery calling jQuery Function in parent

Question

• How do I get jQuery in an iFrame to call a jQuery function in the parent?

Here is code for iFrame

<script>
    $(document).ready(function (){

        $("#Hey").click(function ()
        {

            parent.WorkPlease(); // does not work
                   window.parent.WorkPlease(); // also does not work
                   // Both hosted on same domain

        });
    });
</script>

Here is the jQuery on the parent page hosting the iFrame

<script type="text/javascript">
$(document).ready(function(){

    function WorkPlease()
    {
$('html,body').animate({scrollTop: $("#iFrame").offset().top}, 5000);// 
    }
});
</script>

Answer 1

You can access the parent's DOM from the iframe, but within the same domain. This seems to be your case.

The problem with your code is that the workPlease function is defined as a local variable of the anonymous function you pass to the document ready event handler, and not in the window object of the parent page itself.

Try:

$(document).ready(function(){

    window.workPlease = function()
    {
        $('html,body').animate({scrollTop: $("#iFrame").offset().top}, 5000);// 
    }
});