Invalid Character DOM Exception in IE9

问题

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?

回答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

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

回答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.

回答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.

回答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.

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

来源：https://stackoverflow.com/questions/5344029/invalid-character-dom-exception-in-ie9

标签

javascript

dom

internet-explorer-9

domexception