Тэг script, jQuery и функции html() и text()
В этой статье рассказано об интересной особенности работы jQuery в браузере IE. Дело в том, что в Internet Explorer вы не сможете получить содержимое тега script, если его тип не javaScript, с помощью функции .text().
После этого открытия я написал тестовую страничку, для доступа к содержимому тега script, которую запустил в браузерах Internet Explorer и FireFox.
<!DOCTYPE HTML> <html> <head> <title>jQuery: Scripts Tags And Text(), HTML(), and Contents()</title> <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript"> // Инициализация. jQuery(function( $ ){ // ссылка на тег script. var script = $( "#data" ); // ссылки на области вывода результатов. var textOutput = $( "#text-output" ); var htmlOutput = $( "#html-output" ); var contentsTextOutput = $( "#contents-text-output" ); var contentsHtmlOutput = $( "#contents-html-output" ); // Используем различные подходы для вывода содержимого // тега script в документ. // Text. textOutput.text( script.text() ); // Html. htmlOutput.text( script.html() ); // Contents - Text. contentsTextOutput.text( script.contents().text() ); // Contents - Html. contentsHtmlOutput.text( script.contents().html() ); }); </script> </head> <body> <h1>jQuery: Тэг script и функции html() и text()</h1> <script id="data" type="application/x-json"> {script-content} </script> <!-- Здесь будет выводится содержимое тега. --> <p> TEXT: <span id="text-output"> ... </span> </p> <p> HTML: <span id="html-output"> ... </span> </p> <p> CONTENTS (TEXT): <span id="contents-text-output"> ... </span> </p> <p> CONTENTS (HTML): <span id="contents-html-output"> ... </span> </p> </body> </html>
Как видите, в примере содержится тег script. Затем используются методы .text(), .html() и .contents() для доступа к содержимому и выводу результата на страницу. Я проверил этот код в IE6, IE7, IE8, FireFox, Safari и Chrome. Во всех браузерах, кроме IE, результат был одинаков. В различных версиях IE также получился одинаковый результат, с небольшим исключением: IE6 и IE7 добавляют дополнительных пробелов, которых нет в IE8.
IE6, IE7, IE8
FireFox, Safari, Chrome
Как видите, IE смог получить доступ к содержимому тега script только с помощью метода .html(). С другой стороны, в остальных браузерах можно использовать методы .text(), .html() и .contents(). Однако, никакой из браузеров не смог получить содержимое используя .contents().html(). Это не ограничение браузеров или jQuery, скорее всего это происходит потому что в теге script нет нетекстовых элементов DOM.
Я не могу объяснить откуда появились лишние пробелы в IE6 и IE7. Очень похоже на то, что в этом случае содержимое тега обрабатывается так, как если бы оно было заключено в тег PRE. Очень похоже на ошибку, которая, однако, была исправлена в IE8.
В общем, выглядит так, что метод .html() является единственным кроссбраузерным способом доступа к содержимому тега script. Это необходимо учитывать, особенно в тех случаях, когда тег script используется как контейнер для html-шаблонов.
{{ m.username }}{не представился} {{m.date}}
{{ m.text }}
{{ child.username }} {{child.date}}
{{ child.text }}
Высказаться по теме
2023.04.02