title: How can a site instantly detect that javascript has been disabled?
body: <p>Normally, when a page is loaded, and the browser has Javascript disabled, we use the <code>&lt;noscript&gt;</code> tag to write something like a warning and tell the client to enable Javascript. However, Facebook, even <strong>after</strong> you load the page with JS enabled, the moment it's disabled you get a notification. How can I do something like this?</p>
  
  <p>UPDATE : This mechanism is no longer available in Facebook, but it was before, I was too late in asking this question, but if any answer is found, I would really appreciate it.</p>
  
  <h2><strong>What I have tried</strong></h2>
  
  <p>I thought about having a segment inside my page which keeps checking if Javascript is disabled, if yes, show the contents of <code>&lt;noscript&gt;</code>.</p>
  
  <p>To Achieve this, I created a page <strong>CheckJS.html</strong>.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="refresh" content="0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;noscript&gt;
         JS is disabled!
      &lt;/noscript&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This page will keep on <strong>refreshing</strong>, when JS is disabled, <strong>JS is disabled!</strong> will appear.</p>
  
  <p>To add this page inside my original page. I tried the following:</p>
  
  <p><strong>1- .load()</strong></p>
  
  <p>I used <strong>JQuery</strong> to <code>.load('CheckJS.html')</code> inside a <code>div</code>. However, it seems that <code>.load()</code> only loads the contents of the <code>&lt;body&gt;</code> of <strong>CheckJS.html</strong>. Means the <code>&lt;head&gt;</code> element and what's inside it will not be loaded inside the <code>div</code>.</p>
  
  <p><strong>2- iframe</strong></p>
  
  <p>After some searching, I found that the only possible way to load a <strong>FULL</strong> html page <strong>including <code>&lt;head&gt;</code></strong> is to use an <code>&lt;iframe&gt;</code>.</p>
  
  <pre><code>&lt;iframe src="CheckJS.html"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>However, the <code>&lt;meta http-equiv="refresh" content="0"&gt;</code> of <strong>CheckJS.html</strong> affects the parent page, the original page itself started refreshing.</p>
  
  <p>If we are able to use this <code>&lt;iframe&gt;</code> without forcing the original page to refresh, then this could be a solution, but even if this solution is found, I feel its more of a <strong>trick</strong> rather than a <strong>real</strong> solution.</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/11633920/how-can-a-site-instantly-detect-that-javascript-has-been-disabled/14764039#14764039"><strong>Antony</strong> 's answer</a> proved that I was wrong about that the <code>iframe</code> refreshes the original page, the browser shows that its refreshing but actually its not, if this is it, then Javascript can be avoided, the <code>CheckJS.html</code> that I provided does the job, and even better, the <code>&lt;noscript&gt;</code> will be hidden when JS is re-enabled. Still this whole iframe approach isn't so user friendly (could freeze the browser), unless refresh occurs every 10 seconds or so, which isn't an <strong>instant detection</strong>.</p>