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.

Answer 4

This error can come when accidentally using standard JavaScript function names as your own function names if you don't use namespaces. For example I have a concept called "Attribute" and I wanted to try a new function that created a new one of those:

<button onclick="createAttribute('Pony')">Foo</button>
<button onclick="createAttribute('Magical pony')">Bar</button>
<script type="text/javascript">
    function createAttribute(name) { alert(name); } 
</script>

• Clicking "Foo" gives you nothing
• Clicking Foo gives you INVALID_CHARACTER_ERR (5) or InvalidCharacterError: DOM Exception 5
• Opening your dev console and running createAttribute('Django') gives you the alert

What is happening is that the buttons are calling document.createAttribute() and your dev console is calling the function you declared.

Solution: use a different function name or better yet, a namespace.

Answer 5

If you are willing to sacrifice a little performance and can use an external library I would suggest using:

Prototype JS

var el = new Element('iframe', {
  id: "<your id here>",
  src: "<your source here>",
  style: "<your style here>"
});

jQuery

var el = jQuery('<iframe>', {
  id: '<your id here>',
  src: "<your source here>",
  style: "<your style here>"
})[0];

This takes care of all the inconsistencies between browsers and is also a lot prettier :-)

Note: This is untested pseudocode - refer to the official documentation pages of Prototype JS and jQuery for more information.

Answer 6

This is a solution for jquery's jquery.bgiframe.js.

if ( $.browser.msie && /9.0/.test(navigator.userAgent) ) {
                var iframe = document.createElement("iframe");
                iframe.setAttribute("class", "bgiframe");
                iframe.setAttribute("frameborder", "0");
                iframe.setAttribute("style", "display:block;position:absolute;z-index:-1;filter:Alpha(Opacity=\'0\');top:expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\');left:expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\');width:expression(this.parentNode.offsetWidth+\'px\');height:expression(this.parentNode.offsetHeight+\'px\');");
                this.insertBefore( iframe, this.firstChild );
            } else {
                this.insertBefore( document.createElement(html), this.firstChild );
            }