jQuery in iframe not working in IE

Question

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!

Does it work if you load the page normally instead of in an iframe? — Barmar, Jun 30 '13 at 07:06
Yes, it works if I load the page normally, not as the content of iframe. — shibalink, Jun 30 '13 at 08:47

Sid · Accepted Answer · 2013-10-11T12:55:04.550

5

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.

edited Oct 11 '13 at 12:55

answered Jun 30 '13 at 07:12

Sid

480
1
6
19

2

Including the jquery library will also not help...i have tried that. You too can try – Sid Jun 30 '13 at 07:49
Thanks for the comment, Sid. But in this particular case, I need to use jQuery, as I need the jQuery plugin that I'm using inside iframe, becase it has the exact effect/functionalities I need. And it is too difficult for me to write something similar/recreate the functionalities/effects in javascript... – shibalink Jun 30 '13 at 09:00
You can post your jquery and ask for some alternate for that code. Maybe someone could help you. – Sid Jun 30 '13 at 14:33
One more thing you could do is that you can use the php include function instead of iframe if you want that the code should remain in jQuery. If you do so then ensure that the jQuery library there in the parent document – Sid Jul 01 '13 at 03:32
5

Thanks for your suggestions. I managed to solve this problem by 1) including jQuery library from the same server (the one the iframe page is at), instead of including from Google server. 2) changed the jQuery version 1.8.3. – shibalink Jul 05 '13 at 00:17
1) Seriously needs to be updated as the answer. It is the jQuery CDN from google server that causes this error! Took me 3 days on and off to randomly come across your comment. Thanks so much! I wish I could give you more SO points lol. – Brian Ogden Oct 11 '13 at 02:41
Simply using jQuery 1.8.3 fixed this problem for me. I was getting "Access is denied" in the IE console prior. – Ryan Burney Nov 26 '13 at 20:35

score 4 · Answer 2 · edited May 23 '17 at 12:34

4

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).

edited May 23 '17 at 12:34

Community

1
1

answered Jul 22 '14 at 21:45

Mike S

1,537
2
11
15

score 3 · Answer 3 · answered Oct 08 '13 at 05:49

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)

score 3 · Answer 4 · answered Oct 11 '13 at 02:57

The actual answer to this, as hotate17 states in a comment, is that he/she was loading the jQuery asset from a CDN, in this case Google's CDN. Loading the jQuery asset from the same server and thus the same URL as the iFrame source fixed his issue and mine too, thanks hotate17!

http://www.sandiegosoftware.net/blog/script5-access-is-denied-error-in-internet-explorer-loading-jquery/

jQuery in iframe not working in IE

4 Answers4

Linked