2013-03-05 117 views
15

如果在客戶端禁用javascript,我想標記消息。我在這裏搜索,發現<noscript>標籤用於處理這個東西。如果在客戶端使用noscript標記禁用javascript,則顯示消息

我在w3schools編輯器做了這個檢查,但它的不工作讓我知道這個<noscript>是不是爲了這個或這個部分我缺少的東西嗎?

enter image description here

+0

W3Schools的可能使用JavaScript來填充結果字段。如果它被禁用,它不能這樣做。只需創建一個HTML頁面並將其加載到瀏覽器中即可。 – 2013-03-05 08:43:39

+11

您不應該使用W3Schools編輯器進行測試和開發。這是您的第一個問題 – Bojangles 2013-03-05 08:43:45

+1

這不是問題的答案,但請閱讀http://w3fools.com/ – Ziinloader 2013-03-05 08:43:53

回答

33

試試這個: -

How to detect JavaScript is disabled in browser? 

正如我們所知,標記用於JavaScript。同樣的方式,當JavaScript在瀏覽器中被禁用時,會有標籤進入操作狀態。

<script>Put Sample code here for execution when JavaScript is Active </script> 
<noscript>Put Sample code here for execution when JavaScript is Disabled</noscript> 

如何處理在瀏覽器禁用了JavaScript?

當JavaScript被禁用時,試圖重定向到某個頁面,在那裏我們可以顯示JavaScript被禁用的消息。 HTML中有一個名爲「元刷新」的元標記,它將用戶在該標題中指定的時間間隔內重定向到另一個頁面。由於我們可以在noscript裏面看到上面的代碼,有一個間隔爲「0」秒的「元刷新」標籤。由於JavaScript在該頁面被禁用,瀏覽器會被重定向到「ShowErrorPage.html」以顯示一些警告消息。

我希望這會幫助你。

+0

非常有用,謝謝 – jonathanwiesel 2013-10-11 15:00:47

+0

@jonathanwiesel:謝謝親愛的,它是我的榮幸。 – Rubyist 2013-10-12 20:30:36

+1

如果__meta重定向被禁用_ – 2014-09-10 11:46:59

1

放置 '不支持' 在一個div消息,並使用JavaScript來隱藏div時頁面加載

+1

此解決方案的問題是,即使啓用javascript,也會顯示消息直到整個頁面加載。 – dreamer 2013-12-25 11:15:02

7

你是對的<noscript>標籤僅用於在JavaScript禁用時顯示。 爲了測試這個,請執行下列操作:

  • 保存此片段在一個文件「的test.html」。
  • 用你的瀏覽器打開它。
  • 啓用/禁用JavaScript(在FireFox中,這裏是:Tools/Options/Content/Enable JS)。

正如你所看到的,你可以把任何HTML<noscript>標籤,你會放一個頁面的體內內。

<html> 
    <body> 
    <h1>Simple Example Page</h1> 
    <script type="text/javascript"> 
     document.write("Hi, JavaScript is enabled!"); 
    </script> 
    <noscript> 
     <div style="border: 1px solid purple; padding: 10px"> 
     <span style="color:red">JavaScript is not enabled!</span> 
     </div> 
    </noscript> 
    </body> 
</html> 
1

<noscript>是爲這種事情,就像<script>是爲JS。請注意,使用meta標記刷新:

<noscript> 
    <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html"> 
</noscript> 

表示,這是在IE瀏覽器(IE10至少)通過提高網絡安全性選項(這是很可能用於禁止JS擺在首位),很容易被禁用。當安全設置增加時,「允許META REFRESH」選項被禁用。

5
<noscript> 
    <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html"> 
</noscript> 

不是一個好的解決方案,因爲IE11(和以前的版本)有一個安全選項,當設置爲'high'時禁用Javascript和Meta Refresh標籤!

我已經找到了處理這種情況最好的解決辦法是:

<noscript class="noscript"> 
    <div id="div100"> 
    Please enable javascript in your browser .... blah blah 
    </div> 
</noscript> 

<style> 
    body{ 
     position:relative; 
    } 
    .noscript { 
     width:100%; 
     height:100%; /* will cover the text displayed when javascript is enabled*/ 
     z-index:100000; /* higher than other z-index */ 
     position:absolute; 
    } 
    .noscript #div100{ 
     display:block; 
     height:100%; 
     background-color:white; 
    } 
</style> 
0

您可以使用計算器使用相同的方法。看到我的jsfiddle鏈接。當Javascript被禁用時,在第一個noscript塊中,在body標籤後面,你可以添加一個填充頂部到一個空的div div,這樣你就可以在你的body中添加你想要的內容,最後,另一個帶有固定位置div的noscript塊,它有你想要的警告信息。嘗試運行它,啓用和不啓用JavaScript。讓我知道! :)

在這裏看到的代碼:https://jsfiddle.net/go60f00n/

<noscript> 
     <div id='noscript_padding'></div> 
     </noscript> 
     <div> 
     <p>Lorem ipsum dolor sit amet consectetuer tincidunt nunc ac faucibus mattis. Gravida tempus turpis Morbi vitae sed Suspendisse auctor dignissim nulla adipiscing. Adipiscing justo lacinia justo Vivamus Vestibulum amet ut Donec vitae aliquet. Orci tempus orci Donec nibh eget tellus pede semper adipiscing leo. A et id sagittis velit venenatis.</p> 
     <p>Tellus ridiculus ipsum pretium condimentum Ut elit sed vitae amet In. Curabitur ipsum elit interdum tortor semper at dolor justo consequat leo. Id fermentum vitae tincidunt pretium lacus leo Cras urna risus urna. Pretium Vestibulum et euismod nec pede et tincidunt condimentum laoreet vel. Dolor vestibulum laoreet habitant a Nulla.</p> 
     <p>Lobortis lobortis quis elit mollis quis risus Morbi in augue montes. Mauris ipsum libero tellus et Quisque id non justo nibh dui. Dui nisl at Fusce Curabitur interdum tincidunt sed Vestibulum platea justo. At ut ante eget ac sem sed nulla id nunc mus. Velit In faucibus a auctor Sed Morbi habitasse est urna natoque. </p> 
     </div> 
     <noscript> 
     <div id='noscript_warning'>Please enable Javascript!</div> 
     </noscript> 

所以CSS代碼:

html, body { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
     } 

     p { 
      margin: 0; 
     } 

     #noscript_padding { 
      padding-top: 1.9em; 
     } 

     #noscript_warning { 
      position: fixed; 
      top: 0; 
      left: 0; 
      width: 100%; 
      z-index: 101; 
      text-align: center; 
      font-weight: bold; 
      color: #FFF; 
      background-color: #AE0000; 
      padding: 5px 0 5px 0; 
     } 
相關問題