javascript - document.ready function is not working inside an iframe - Stack Overflow

admin管理员组

文章数量:1351988

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?

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?

• javascript
• jquery
• iframe

Share Improve this question Follow edited Nov 19, 2013 at 5:50 user229044♦ 240k4141 gold badges344344 silver badges346346 bronze badges asked Nov 19, 2013 at 0:34 IzuIzu 6711 silver badge88 bronze badges 9

• this will be fired when the iframe is loaded, why do you want it to be fired when the parent page is loaded – Arun P Johny Commented Nov 19, 2013 at 0:37
• Actually it doesn't tiger after the iframe is loaded as well. – Izu Commented Nov 19, 2013 at 0:39
• Do the #demo and .vticker elements you are trying to effect exist within the iframe or in the parent? (A script in an iframe can't see elements outside the frame.) – Lola Commented Nov 19, 2013 at 0:43
• Those are exist inside of the iframe. – Izu Commented Nov 19, 2013 at 0:46
• 1 Are you including your link to jquery in the inner frame? – Lola Commented Nov 19, 2013 at 0:50

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 4

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.

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 plete selfstanding webside. There is no munication 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.

i was facing the same issue. i was using relative path to add jQuery file.

<script type="text/javascript" src="js/Jquery.js"></script>

by adding '/' it solved my issue.

<script type="text/javascript" src="/js/Jquery.js"></script>

本文标签： javascriptdocumentready function is not working inside an iframeStack Overflow