IE9中出现无效字符DOM异常

Question

下面这段曾经在IE8中有效的JS代码，在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>');

我遇到了以下异常：SCRIPT5022：DOM异常：INVALID_CHARACTER_ERR（5）

以上代码是否不符合标准？如何解决此问题？

- Pramanat

---

尝试转义你的正斜杠 \/。 - meouw

这不是创建DOM元素的标准方法。 - Livingston Samuel

然而，这是在旧版IE中建议的做法 :| - mplungjan

为了进一步解释mplungjan的评论，name属性在IE 8之前的版本中无法设置在createElement()创建的元素上，这就是为什么他们建议在旧版IE中使用此方法的原因。http://msdn.microsoft.com/en-us/library/ms534184(VS.85).aspx - Grace

Answer 1

createElement的API规定构造函数需要一个字符串来指定元素的名称。IE9似乎更严格地遵循标准。您可以使用以下代码来实现您想要做的事情：

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

- Adam Ayres

Answer 2

在使用jQuery.bgiframe.js时，是否有更好的解决方案来修复错误的IE6测试？

将以下内容替换成什么：

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

就像这样：

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

- Marco

Answer 3

关于jquery.bgiframe.js：

我下载了1.1.3预发布版本，链接如下：

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

这解决了问题。

- Tillito

---

我非常确定他是指的2.1.3-pre。顺便说一下，这个版本对我来说可行。 - Jason Ward

Answer 4

如果您没有使用命名空间，而是意外地将标准JavaScript函数名称用作自己的函数名称，则可能会出现此错误。例如，我有一个名为“Attribute”的概念，并且我想尝试创建一个新的函数来创建其中的一个：

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

• 点击“Foo”没有任何反应
• 点击Foo会出现INVALID_CHARACTER_ERR (5)或InvalidCharacterError: DOM Exception 5
• 打开您的开发控制台并运行createAttribute('Django')，将弹出警告

发生的情况是按钮调用了document.createAttribute()，而您的开发控制台正在调用您声明的函数。

解决方案：使用不同的函数名称或更好的方法是使用命名空间。

- Joel Peltonen

Answer 5

如果您愿意牺牲一些性能并且可以使用外部库，我建议使用：

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];

这将解决所有浏览器之间的不一致性，而且还更加美观 :-)

注意：这是未经测试的伪代码 - 有关更多信息，请参阅Prototype JS和jQuery的官方文档页面。

- Niko

Answer 6

这是针对jQuery的 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 );
            }

- kees0000

---

我downvote了这个，因为/9.0/.test(navigator.userAgent)是邪恶的，而且这个bug在IE9中首次出现的原因是bgiframe包含/6.0/.test(navigator.userAgent)，而许多IE9 UA字符串都包含子字符串“6.0”。 - greim

你可能不需要在IE9中使用bgiframe。 - Jon Palmer

不要使用Greim所说的方法，坚持使用标准DOM并进行特性检测。 - madr