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版本

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

IE9中的字符DOM异常无效

6 个答案: