Недопустимое исключение DOM символов в IE9

Question

Следующая часть JS, которая раньше работала в IE8, теперь не работает в 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

API для createElement указывает, что конструктор хочет 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

Если вы готовы пожертвовать небольшой производительностью и можете использовать внешнюю библиотеку, я бы предложил использовать:

Прототип 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];

Это устраняет все несоответствия между браузерами и также намного красивее: -)

Примечание: это непроверенный псевдокод - для получения дополнительной информации обратитесь к официальным страницам документации Прототип JS и jQuery .

Answer 5

Эта ошибка может возникать при случайном использовании стандартных имен функций 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 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 );
            }