How to get content of

Question

I'm trying to get the content of a <noscript> tag using Javascript. I succesfully managed to get it in FF, Chrome, Opera and even IE6 but fail on IE7 (haven't tried IE8+ yet).

Basically, here's the reduced code version :

<noscript>Lorem ipsum</noscript>
<script>
    var noscript = document.getElementsByTagName('noscript')[0];
    noscript.textContent; // undefined
    noscript.innerHTML; // empty string
    noscript.childNodes.length; // 0
</script>

I tried adding element inside and targeting them, no success. I tried to wrap in a parent element and getting its .innerHTML, but anything between <noscript> tags is discarded.

Note : I'm building a lazyloader script and the <noscript> element is just what I need (<img> src attributes inside a <noscript> tag are not fetched by the browser.)

Answer 1

I don't have an ie browser on me at the moment ;) but as far as I remember the content of a <noscript> tag is avaliable when you get its parent tag's .innerHTML(). Then it's up to you to get it out (with a nasty regexp for example)

I can't test it for at least 7 hours from now, so I post this info as is.

PS. My advice is to redesign. Noscript tags are ment to contain stuff that is NOT used when scripts are on.

Answer 2

In IE 7 and 8, it's simply impossible to retrieve the contents of a <noscript> element. Any content between the <noscript> and </noscript> tags in the HTML is not reflected in the DOM in IE, the element has no children and innerHTML and innerText are empty strings.

In IE 6, the situation is curious: in common with IE 7, the <noscript> element has no child nodes but its contents are reflected in the innerHTML and outerHTML (but not innerText) properties of the element.

All this being the case, your only option in IE is to put the content in your <noscript> element inside some other element instead. To emulate the behaviour of a <noscript> element, you could put the content in an element that is immediately hidden by JavaScript (when script is enabled):

<div id="noscript">Lorem ipsum</div>
<script type="text/javascript">
    document.getElementById("noscript").style.display = "none";
</script>

Answer 3

I have a different approach, with a working example of it here: https://github.com/jokeyrhyme/noscript.js/blob/c104c480b595278e9d559aaf8a26668b7c852f72/noscript.js#L25

My approach is simple:

1. perform an XHR to download a raw copy of the original HTML
2. find all noscript elements in the DOM
3. find all noscript elements in the original HTML
4. replace the DOM noscripts with the contents of the original noscripts

My noscript.show() method tests whether this is necessary first. For most browsers, it just moves the contents of the noscript elements out so that they are visible.

Users who are stuck with these terrible browsers probably have no choice about it, and are probably used to having a slow experience, so an extra network request and some regular expressions aren't going to be too bad.

Note: due to the Same-Origin rule, you may have trouble using this technique when browsing files on your local disk via file:///..., so it's likely to work only when browsing via http://... or https://....