document.ready function is not working inside an iframe

Question

In the parent page I have an iframe like this:

<iframe src="facts.php" style="width:320px; height:500px; border:hidden" id="facts">  </iframe>

And inside of that iframe I have a jQuery function like this,

<script type="text/javascript">
$(document).ready(function(){
    $('#demo').hide();
    $('.vticker').easyTicker();
});
</script>

But this function doesn't trigger when the parent page is loaded. Can you please explain me how to solve this?

Answer 1

Try this inside your iframe.

<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#demo').hide();
    $('.vticker').easyTicker();
});
</script>

You are facing this issue because the parent JavaScript cannot access the events inside the iframe. You better include the script inside the source of the iframe.

Answer 2

This seems like cross side scripting to me. First of all try this in your iframe:

<script>
    $(document).ready(function()
    {
        alert("iFrame is ready");
    });
</script>

If this does not work, check if you includet jQuery the right way.

Remember: your iframe is a complete selfstanding webside. There is no communication between your main frame and your iframe. That means if you use Javascript in your iframe you can only manipulate HTML-code inside the iframe. If you want to manipulate HTML-elements outside of the iframe you need to include the Javascript in your main frame.