Calling a grandparent JS function that includes jquery from a nested iFrame. D7

Question

I'm calling the grandparent_func from a second-level nested iframe like so. This works in a non-Drupal environment, but am getting the following errors when running in drupal. (yes. I did remember to include the jquery file ;-)

parent.parent.grandparent_func( Date.now(), Date.now());

ERRORS:

For the following, I get a "TypeError: $ is not a function" error

<script>
    function grandparent_func(){        
        $("#fancy_regit_link").attr("href", "/my/actual/path");
        $("#fancy_regit_link").trigger('click');                

    }
</script>

So, I enclosed jquery like so to make it drupal-friendly and get: TypeError: parent.grandparent_func is not a function

<script>
(function($) {
    function grandparent_func(){        
        $("#fancy_regit_link").attr("href", "/my/actual/path");
        $("#fancy_regit_link").trigger('click');                

    }
})(jQuery);
</script>

For good measure, I double enclose it with jquery's ready function. TypeError: parent.grandparent_func is not a function

<script>
(function($) {
    $( document ).ready(function() {
        function grandparent_func(){        
            $("#fancy_regit_link").attr("href", "/my/actual/path");
            $("#fancy_regit_link").trigger('click');                

        }
    }); 
})(jQuery);
</script>

Any thoughts?

Thanks.

Answer 1

Introducing a closure around the whole function (as in your 2nd and 3rd examples) will take it out of the global scope, so it won't be available on the window, and subsequently the iframe's parent (which are the same thing).

What you're looking for is more like:

function grandparent_func() {        
  (function($) {
    $("#fancy_regit_link").attr("href", "/my/actual/path");
    $("#fancy_regit_link").trigger('click');                
  })(jQuery);
}

That makes sure grandparent_func is global, while still providing you the jQuery object.