Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript code in iframes in IE9 not working

Tags:

I've a very complete site in ASP.NET which uses iframes. I'm working to change an old control we'd been using to show dialogs to use jQuery UI dialogs. I'm also making sure everything works well in IE9.

The fact is: the script I've in the pages shown in iframes is not working in IE9. Why? Because Object, Array and String are undefined. There may be some others issues, I've seen only this ones.

There is no chance (because a lot of reasons) to stop using iframes on some dialogs. And I'd rather not to use the meta tag to force IE8 Compatibility. Does anyone know any way to fix this ugly bug in IE9?

jQuery code for the iframe in a plugin I've made to config jQuery UI dialog:

options.content = $("<iframe>")     .attr("src", options.intSrcIframe)     .attr("frameborder", 0)     .attr("scrolling", options.intIframeScrolling)     .css("background-color", options.intBgColorIframe)     .attr("height", "100%")     .attr("width", "100%");  _this.html(options.content); 
like image 224
Diego Avatar asked Apr 01 '11 14:04

Diego


People also ask

Can you use javascript in an iframe?

As long as the protocol, domain and port of the parent page and iframe match, everything will work fine. I added an example on how to use the window.

Does iframe work on IE?

iframe is transparent in Edge,chrome and works fine on IE - Microsoft Q&A.


2 Answers

Note: here there is some documentation from IE9 that may help to understand. Thanks to @Ben Amada for sharing it.


After almost a week of going crazy day after day I found it out.

The problem with IE9 is no specifically with the javascript code in the iframes. Not even with the javascript in iframes added by javascript or any library (I have lots of js libraries and plugins that could be screwing IE9).

The problem is when you move the iframe or one ancestor through the DOM. IE9 will excecute the code in the page loaded in the iframe as many times as moves you make. Each time (but the last one) will have Object, String, Array and others undefined (and other bugs too).

Example:

var iframe = $("<iframe>").attr("src", "www.example.com").attr("id", "myIframe"); iframe.appendTo("body"); $("#myIframe").appendTo("form:eq(0)"); 

The javascript code in "www.example.com" will be executed once with the error described above and then once with no errors.

With the following code the code will be excecuted just once and correctly:

var iframe = $("<iframe>").attr("src", "www.example.com").attr("id", "myIframe"); iframe.appendTo("form:eq(0)"); 

I hope this helps someone to avoid this pain in the ass,

Diego

like image 84
Diego Avatar answered Jun 05 '23 01:06

Diego


There is a similar way of achieving this using an existing iframe if you aren't creating a new element.

$(function () {     var iframeSrc = $("#iframeid").attr("src"); // capture target URI     $("#iframeid").attr("src", "about:blank"); // delay loading until we reposition in the DOM     $("#iframeid").appendTo("#newparent").attr("src", iframeSrc); // reposition, load iframe by setting src }); 

IE9 or jquery framework needs to fix this issue.

like image 26
SliverNinja - MSFT Avatar answered Jun 05 '23 00:06

SliverNinja - MSFT