在IFRAME中添加子HTML之后，父HTML jQuery插件无法正常工作

Question

I have a html called parent.html and another html called child.html . The child html serves as the body for the parent and i included it in the parent like this :

<div id ="body_Menu" style="padding-top:1em;">
    <iframe src="D:\\bodice\\bodiceMenu\child.html" width="1220" height="600" scrolling="no">
    </iframe>
</div>

Now both the parent and child use jquery plugins. A common library is the traditional jquery.js :

<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

which has been included in both the parent and child as both of them have javascript/jquery animations/functions that need to run .

The problem is that, after including the child in iframe , the parent javscript has stopped running. I don't see any error in the console as well. But when both the html s are loaded separately, they run perfectly .

I am using these two plugins :

<script src="jquery-css-transform.js" type="text/javascript"></script>
<script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script>

What is the problem here ? How can i rectify it ? Any help is appreciated .

Answer 1

As i can see, your iframe take its source from a local file (D:\\bodice\\bodiceMenu\\child.html). If you display your page from a web server (even a local server on your machine), you won't be authorized to display your iframe due to security reason on most browsers (this is the case in chrome for example). Is that what you're trying to do ?