iFrame jquery auto resizing not working
I'm using a jquery script to autoresize an ifram开发者_JAVA百科e. It was working fine till now, but I made a lot of changes to the site and suddenly it stopped working and I found with Chrome dev tools the JS was giving this error message:
Cannot read property of "body" undefined.
I removed everything from the code and just left a call to jquery and the resizing script in the head:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/iframe.js"></script>
</head>
and the iframe in the body.
<body>
<iframe src="http://chusmix.com" scrolling="no" frameborder="0"></iframe>
</body>
However it's still not working. I don't know what else to do. I'm testing it here:
http://www.chusmix.com/game/testframe.php
What am I doing wrong? Thanks
It's a security issue. The URL you are going to to view it is http://www.chusmix.com and the iframe is http://chusmix.com (no www) so the browser is not allowing you to access the iframe's document (hence it is undefined).
Go to http://chusmix.com/game/testframe.php and you will see that it works.
Alternatively you can add the following attribute to the iframe element which will simply do the job for you:
onload="$(this).height($(this.contentWindow.document.body).height());"
加载中,请稍侯......
精彩评论