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)

上面这段代码不符合标准吗？该问题的解决方法是什么？

Answer 1

createElement 的 API 指定构造函数需要一个指定元素名称的 string。看来 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

Answer 2

对于 jQuery.bgiframe.js，修复错误的 IE6 测试会是更好的解决方案吗？

如何替换这个：

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

类似这样的：

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

Answer 3

对于 jquery.bgiframe.js：

我在

下载了 1.1.3 pre 版本

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

这解决了问题。

Answer 4

如果您不使用命名空间，不小心将标准 JavaScript 函数名称用作您自己的函数名称，就会出现此错误。例如，我有一个名为“属性”的概念，我想尝试一个新函数来创建一个新函数：

<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()，而您的开发控制台正在调用您声明的函数。

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

Answer 5

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

原型 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 的官方文档页面。

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