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?

To expand on mplungjan's comment, the name attribute fails to set on elements created by createElement() in versions of IE before 8, which is why they recommend this method for older IE versions. http://msdn.microsoft.com/en-us/library/ms534184(VS.85).aspx — Grace, Dec 13 '11 at 01:00

score 29 · Accepted Answer · answered Mar 17 '11 at 19:24

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

score 13 · Answer 2 · edited Dec 22 '11 at 17:35

13

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

edited Dec 22 '11 at 17:35

Adrian

5,603
8
53
85

answered Apr 13 '11 at 10:14

Marco

131
2

score 7 · Answer 3 · answered Jun 21 '11 at 13:48

7

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.

answered Jun 21 '11 at 13:48

Tillito

7,718
7
34
31

I am fairly certain he means 2.1.3-pre. worked for me by the way. – Jason Ward Mar 27 '12 at 13:54

score 0 · Answer 4 · answered Apr 12 '13 at 08:17

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.

score 0 · Answer 5 · answered Jul 29 '13 at 09:05

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.

score -6 · Answer 6 · edited Apr 11 '11 at 19:58

-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 );
            }

edited Apr 11 '11 at 19:58

Community

1
1

answered Apr 09 '11 at 12:03

kees0000

105
2

I downvoted this because /9.0/.test(navigator.userAgent) is evil, and the whole reason this bug is popping up in IE9 in the first place is that bgiframe contained /6.0/.test(navigator.userAgent) and many IE9 UA strings contain the substring "6.0". – greim Apr 12 '11 at 19:49
2

you presumably don't want the bgiframe in IE9 – Jon Palmer Apr 30 '11 at 19:57
1

What greim said. Do not use it, stick to standard DOM and use feature detection. – madr Nov 17 '11 at 09:18

Invalid Character DOM Exception in IE9

6 Answers6

Linked