Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery in iframe not working in IE

I have an iframe content that includes jQuery, and the jQuery part of the content in iframe is not working in IE (the part that is not used jQuery is working fine, and everything works fine in Chrome and Firefox).

Here's the code:

<!DOCTYPE html>
<html>
<head>
    <title>iframe content</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>This heading is showing up just fine.</h1>
    <div id="jQuery-generated-content">
           <!-- content dynamically generated by jQuery plugin This part is not showing in iframe in IE -->
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">   </script>
    <script src="pathTojQueryPlugin.js"></script>
    <script type="text/javascript">
        jQuery.codeToInitiatePlugin
    </script>

</body>
</html>

I tried inserting jQuery code in the head, right after the body tag, with both relative and absolute path, but no luck. I would greatly appreciate if anyone knows any workarounds for this or what's causing IE to not read jQuery.

Thanks in advance!

like image 635
shibalink Avatar asked Jun 30 '13 07:06

shibalink


3 Answers

I also encountered the same problem some time ago. The problem is caused because IE is unable to access the jquery library from within the iframe and thus it cannot read the jquery code. The only walkaround would be to convert the jquery code to javascript.

Update:

Using a different version of jQuery can also solve the problem. Or a different jQuery library may be used alternatively.

like image 121
Sid Avatar answered Sep 22 '22 06:09

Sid


From another SO question:

This is a legit jQuery 1.10.1 bug: http://bugs.jquery.com/ticket/13980 .

Source

In my case, using...

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

..solved the problem. It also happened to be the same version as the parent page (thanks Avigon).

like image 31
Mike S Avatar answered Sep 22 '22 06:09

Mike S


Probably you've solved this some other way already, but just in case someone else finds this post too.

Here's a small "trick" that might help in certain cases.
Add this inside iframe before using jQuery:

if (window.jQuery) { 
   jQuery = window.jQuery; 
   $ = window.jQuery; 
}

However the page containing iframe must have jQuery. (And preferably same version)

like image 44
Avigon Avatar answered Sep 26 '22 06:09

Avigon