Как получить содержимое <noscript> в Javascript в IE7?
Я пытаюсь получить содержание <noscript> тег с использованием Javascript. Я успешно смог получить его в FF, Chrome, Opera и даже IE6, но потерпел неудачу в IE7 (еще не пробовал IE8+).
В основном, вот сокращенная версия кода:
<noscript>Lorem ipsum</noscript>
<script>
var noscript = document.getElementsByTagName('noscript')[0];
noscript.textContent; // undefined
noscript.innerHTML; // empty string
noscript.childNodes.length; // 0
</script>
Я попытался добавить элемент внутрь и нацелить их, но безуспешно. Я попытался обернуть в родительский элемент и получить его .innerHTML, но ничего между <noscript> метки отбрасываются.
Примечание: я создаю сценарий lazyloader и <noscript> элемент как раз то что мне нужно (<img>src атрибуты внутри <noscript> тег не выбирается браузером.)
9 ответов
В IE 7 и 8 просто невозможно получить содержимое <noscript> элемент. Любой контент между <noscript> а также </noscript> теги в HTML не отражаются в DOM в IE, элемент не имеет дочерних элементов и innerHTML а также innerText пустые строки.
В IE 6 ситуация любопытна: как и в IE 7, <noscript> элемент не имеет дочерних узлов, но его содержимое отражено в innerHTML а также outerHTML (но нет innerText) свойства элемента.
Все это в вашем случае, единственный вариант в IE, чтобы поместить контент в <noscript> элемент внутри какого-то другого элемента вместо. Подражать поведению <noscript> элемент, вы можете поместить содержимое в элемент, который сразу скрыт JavaScript (когда скрипт включен):
<div id="noscript">Lorem ipsum</div>
<script type="text/javascript">
document.getElementById("noscript").style.display = "none";
</script>
Не самое элегантное решение - изображения загружаются как обычно с IE7 и IE8, и все другие браузеры получают дополнительное преимущество от отложенной загрузки. В конечном итоге вы получите несколько пустых блоков комментариев... но кого это волнует, верно?
<!--[if (gt IE 8)|!(IE)]><!--><noscript><!--<![endif]-->
<img src="/path/to/img.jpg" alt="photo" />
<!--[if (gt IE 8)|!(IE)]><!--></noscript><!--<![endif]-->
JavaScript (jQuery - если вам нужен настоящий JS, дайте мне знать):
jQuery(function($) {
$('noscript').each(function() {
var $this = $(this);
$this.replaceWith($this.text());
});
});
Протестировано с IE7+, Chrome, FF3.6+, Opera11
Чтобы обойти это, нужно продублировать содержимое noscript в качестве его атрибута.
Например:
<noscript id="ns" alt="Lorem ipsulum">Lurem ipsulum</noscript>
По сценарию получаем значение атрибута alt вместо его innerHTML
<script>
var ns = document.getElementByid('ns');
var htm = ns.innerHTML || ns.getAttribute('alt');
alert(htm);
</script>
Вы можете получить доступ к тегу noscript textContent свойство в большинстве современных браузеров. Для старых браузеров я написал polyfill, который работает довольно быстро и во всех настольных и мобильных браузерах, которые я мог протестировать.
Посмотреть сообщение в блоге: http://queryj.wordpress.com/2012/07/06/read-noscript-tag-content-reliably-in-all-browsers/
Посмотреть код (Двойная лицензия под лицензиями MIT и GPL): https://github.com/jameswestgate/noscript-textcontent/
РЕДАКТИРОВАТЬ:
Сценарий работает путем перезагрузки страницы с помощью ajax-запроса (который должен быть кэширован в браузере) и синтаксического анализа содержимого для браузеров, которые не поддерживают textContent имущество
Вы могли бы
<script>document.write('<script id="images" type="text/html">')</script>
как раз перед изображениями, а затем
<script>document.write('</scr'+'ipt>')</script>
после этого. У вас будут изображения, доступные без javascript, а с помощью JavaScript вы сможете получить их источники в $('images'). InnerHTML
У меня другой подход, с рабочим примером этого здесь: https://github.com/jokeyrhyme/noscript.js/blob/c104c480b595278e9d559aaf8a26668b7c852f72/noscript.js#L25
Мой подход прост:
- выполнить XHR, чтобы загрузить необработанную копию исходного HTML
- найти все элементы noscript в DOM
- найти все элементы noscript в оригинальном HTML
- замените надписи DOM содержимым оригинальных надписей
мой noscript.show() Метод проверяет, нужно ли это в первую очередь. Для большинства браузеров он просто перемещает содержимое элементов noscript, чтобы они были видны.
Пользователи, которые застряли в этих ужасных браузерах, вероятно, не имеют никакого выбора по этому поводу и, вероятно, привыкли к медленной работе, поэтому дополнительный сетевой запрос и некоторые регулярные выражения не будут слишком плохими.
Примечание: из-за правила Same-Origin у вас могут возникнуть проблемы при использовании этой техники при просмотре файлов на локальном диске через file:///..., так что, вероятно, будет работать только при просмотре через http://... или же https://...,
Это действительно грязный хак, и он полностью не проверен, но у меня просто возникла идея:D
Вы можете сделать, как предлагали другие, поместить содержимое в div, а не в noscript, и, в дополнение к его скрытию, немедленно удалить src атрибут всех img теги, использующие что-то для эффекта:
jQuery(function () {
jQuery('div#noscript img').attr('src', '');
});
Это должно ограничивать (но не исключать) выборку изображений.
Это всего лишь основано на комментариях и предложениях других, надеюсь, это поможет.
Редактировать - еще один грязный хак, о котором я только что подумал, который предполагает, что вы можете изменить место, где живет html, поэтому может иметь или не иметь отношение:
Внутри noscript есть
<iframe width="100%" height="100%" src="?noscript=true" />
тогда ты можешь XMLHttpRequest для содержания noscript...
В данный момент у меня нет браузера ie;), насколько я помню, содержание <noscript> тег доступен, когда вы получаете родительский тег .innerHTML(), Тогда это зависит от вас, чтобы получить его (с неприятным регулярным выражением, например)
Я не могу проверить это по крайней мере в течение 7 часов, поэтому я публикую эту информацию как есть.
PS. Мой совет - переделать. Теги Noscript должны содержать материал, который НЕ используется, когда скрипты включены.
Вы запрашиваете элементы скрипта вместо элементов noscript. Это работает во всех браузерах:
<noscript>Lorem ipsum</noscript>
<script>
var noscript = document.getElementsByTagName('noscript')[0];
alert(noscript.innerHTML); // Lorem ipsum
</script>