Access Contents of <noscript> with Javascript

Question

<noscript><div id="example">I want to get this innerHTML</div></noscript>

<script type="text/javascript"> alert($('example').innerHTML);</script>

This javascript snippet just returns an empty string. Is there a way of getting the contents of a noscript node?

p.s. I'm using prototype on this particular project.

Kwangju

Try $($("noscript").text()) with jQuery. – Leatherwood

This ^ does work. At least in Chrome 32. – Morningglory

Answer 1

If scripting is enabled, the noscript element is defined as containing only text - though it must be parsable text, with some restrictions on content. With that in mind, you should be able to extract the text, parse it, and then find your desired element. A rudimentary example of this follows:

var nos = document.getElementsByTagName("noscript")[0]; 
// in some browsers, contents of noscript hang around in one form or another
var nosHtml = nos.textContent||nos.innerHTML; 

if ( nosHtml )
{
  var temp = document.createElement("div");
  temp.innerHTML = nosHtml;

  // lazy man's query library: add it, find it, remove it
  document.body.appendChild(temp);
  var ex = document.getElementById("example");
  document.body.removeChild(temp);

  alert(ex.innerHTML);
}

Note that when I originally wrote this answer, the above failed in Google Chrome; access to noscript content appears to be somewhat better-supported these days, but it still strikes me as an edge-case that is perhaps somewhat more likely than other elements to exhibit bugs - I would avoid it if you've other options.

Spine

This does not seems to work on IE7 (XP). I does work on IE6, though. – Khedive

Try $($("noscript").text()) with jQuery. – Leatherwood

@Spine All this time later, could you clarify something about this answer? in Google's Chrome, the noscript element has no children in the DOM - if I understand this correctly, are you saying the version of Chrome you were testing at the time completely emptied the contents of the noscript tags when Javascript was enabled, thus rendering its inner contents empty? If true, it seems a tad odd. I'm trying to implement something similar today, but this has me wondering if the noscript specification doesn't elaborate on what to do with its contents. – Salvo

Good lord, who knows what I was thinking back then, @SuperCat. Current standards imply that the textContents of a noscript element should be accessible (though it may be a validation error to include certain contents); what they implied 6 years ago I haven't the energy to guess at. I still think this is a dodgy place to store anything important, but it does appear less fraught with danger now; I'll revise the note. – Spine

Answer 2

I'm not sure about prototype, but this works in Chrome with jQuery:

$('noscript').before($('noscript').text());

Kathrinekathryn

I've used this successfully with IE9, FF9, and Chrome 16.0.912.77. Have to use a work-around for IE8 (and maybe earlier), in my case, to retrieve the content at the current URL via AJAX to insert into a jQuery UI tab as the actual tabbed content from a non-root url is served up in a noscript tag by default for a full request, only the tab content on an AJAX request. – Casto

Answer 3

Testing with Firefox 3.0.7, Safari 3.2.2, and MSIE 7.0.5730.13 (all on WinXP SP3) it appears that everything within the <noscript> tags is completely omitted from the DOM tree.

It may be possible to access the <noscript> element itself, however, and then use DOM methods to change its child elements.

Crowell

Didn't try the other two, but FF3.0.7 exposes the contents via textContent. – Spine

Answer 4

From the HTML 4.0 spec:

The NOSCRIPT element allows authors to provide alternate content when a script is not executed. The content of a NOSCRIPT element should only be rendered by a script-aware user agent in the following cases:

• The user agent is configured not to evaluate scripts.
• The user agent doesn't support a scripting language invoked by a SCRIPT element earlier in the document.

It seems to me that this implies that the entire contents of the NOSCRIPT tag (in this case, your div) are ignored altogether if scripting is enabled in the browser. Have you verified that the "example" div is accessible through the DOM at all in your case?

Vandenberg

I've actually tested it (see my answer) - the div isn't in the DOM. – Crowell

Answer 5

Try $($("noscript").text()) with jQuery.

Leatherwood

That's interesting, and useful for retrieving plain text. but Sizzle (1.9.1) throws an "unrecognized expression" error if you try to retrieve any markup with tags. – Pileup