Invalid Character DOM Exception in IE9

Question

The following piece of JS which used to work in IE8 is failing now in IE9.

document.createElement('<iframe id="yui-history-iframe" src="../../images/defaults/transparent-pixel.gif" style="position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;"></iframe>');

I get the following exception : SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5)

Is the above piece of code not according to standards. What's the fix for the issue?

Answer 1

The API for createElement specifies that the constructor wants a string that species the name of an element. It would appear that IE9 is more strictly following standards. You can accomplish the same thing you are trying to do with the following code:

var iframe = document.createElement("iframe");
iframe.setAttribute("id", "yui-history-iframe");
iframe.setAttribute("src", "../../images/defaults/transparent-pixel.gif");
iframe.setAttribute("style", "position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;");

http://msdn.microsoft.com/en-us/library/ms536389(v=vs.85).aspx

Answer 2

For jQuery.bgiframe.js, would be a better solution to fix the wrong IE6 test?

What about replacing this:

if($.browser.msie&&/6.0/.test(navigator.userAgent)

with something like this:

if ($.browser.msie && $.browser.version=="6.0")

Answer 3

For jquery.bgiframe.js:

I downloaded version 1.1.3 pre at

https://github.com/brandonaaron/bgiframe/blob/master/jquery.bgiframe.js

and this solved the problem.