Databases
StackOverflow2013
Postsdbo
POHow can a site instantly detect that javascript has been disabled?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can a site instantly detect that javascript has been disabled?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload