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

This is a really dirty hack, and completely untested but i just had the idea :D

You could do as others have suggested, put the content in a div rather than a noscript, and in addition to hiding it, immediately remove the src attribute of all the img tags using something to the effect of:

jQuery(function () { 
    jQuery('div#noscript img').attr('src', '');
  });

This should limit (but not eliminate) the fetching of images.

This is just a though based on comments and the suggestions of others, hope it helps.

---

Edit - another dirty hack i've just thought of, which assumes that you can change where the html lives, so may or may not be relevant:

Inside the noscript have a

<iframe width="100%" height="100%" src="?noscript=true" />

then you can XMLHttpRequest for the noscript content...

Answer 2

Not the most elegant solution - Images load as normal with IE7 and IE8, and all other browsers get the added benefit of lazi loading. You will end up with some empty comment blocks in the final output... but who cares, right?

<!--[if (gt IE 8)|!(IE)]><!--><noscript><!--<![endif]-->
  <img src="/path/to/img.jpg" alt="photo" />
<!--[if (gt IE 8)|!(IE)]><!--></noscript><!--<![endif]-->

JavaScript (jQuery - if you need real JS let me know):

jQuery(function($) {
  $('noscript').each(function() {
    var $this = $(this);
    $this.replaceWith($this.text());
  });
});

Tested with IE7+, Chrome, FF3.6+, Opera11

Answer 3

You're querying the script elements instead of the noscript elements, This works in all browsers:

<noscript>Lorem ipsum</noscript>
<script>
    var noscript = document.getElementsByTagName('noscript')[0];
    alert(noscript.innerHTML); // Lorem ipsum
</script>

Answer 4

You can access the noscript tag textContent property in most modern browsers. For older browsers I have written a polyfill which runs pretty quickly and in all desktop and mobile browsers I could test.

View the blog post: http://queryj.wordpress.com/2012/07/06/read-noscript-tag-content-reliably-in-all-browsers/

View the code (Dual licensed under the MIT and GPL licenses): https://github.com/jameswestgate/noscript-textcontent/

EDIT:

The script works by reloading the page through an ajax request (which should be cached in the browser) and parsing the contents manually for browsers which do not support the textContent property

Answer 5

You could

<script>document.write('<script id="images" type="text/html">')</script>

just before the images and then

<script>document.write('</scr'+'ipt>')</script>

after it. You'd have the images available without javascript, and with JavaScript there, you'd have their sources at your disposal in $('images').innerHTML

Answer 6

One work around for this is to duplicate the content of noscript as its attribute.

For example:

<noscript id="ns" alt="Lorem ipsulum">Lurem ipsulum</noscript>

On the script get the value of alt attribute instead of its innerHTML

<script>
   var ns = document.getElementByid('ns');
   var htm = ns.innerHTML || ns.getAttribute('alt');

   alert(htm);

</script>