JavaScript가 비활성화되어 있는지 어떻게 감지합니까?

659

오늘 아침에 몇 명의 사람들이 JavaScript를 사용하지 않도록 설정했는지에 대한 게시물이있었습니다. 그런 다음 사용자가 비활성화했는지 확인하기 위해 어떤 기술을 사용할지 궁금해졌습니다.

JavaScript가 비활성화되어 있는지 감지하는 짧고 간단한 방법을 아는 사람이 있습니까? 내 의도는 브라우저가 JS를 사용하도록 설정하지 않으면 사이트가 제대로 작동하지 않는다는 경고를 표시하는 것입니다.

결국 JS가없는 경우 작동 할 수있는 콘텐츠로 리디렉션하고 싶지만 시작하려면 자리 표시 자로이 탐지가 필요합니다.

javascript  html  code-snippets 
— MikeJ
소스
이 정보로 무엇을하고 싶습니까? 답변을 변경할 수 있습니다. 예를 들어 JavaScript가 비활성화되어 있는지 감지하고이를 기반으로 특정 작업을 수행하는 것보다 점진적으로 개선하는 것이 좋습니다.
— Jonny Buchanan
점진적 향상은 내가 찾고있는 것입니다. JS 활성화 또는 가능한 브라우저가 없을 때 제대로 작동하는 대체 콘텐츠로 리디렉션 할 수 있기를 바랍니다.
— MikeJ
1
@expiredninja Nicholas Zakas 의이 게시물은 1 년이 넘었지만 약 2 %를 말합니다.
— sdleihssirhc
가장 쉬운 방법은 noscript를 사용하여 비 Javascript 사이트를 표시하고 javascript를 사용하여 스타일 표시를 수정하여 javascript 종속 요소를 표시하는 것입니다.
— Myforwik 2012
— Vitim.us

답변:

286

JavaScript 강화 콘텐츠를 제공할지 여부를 결정하려고한다고 가정합니다. 최상의 구현은 깔끔하게 저하되므로 사이트는 여전히 JavaScript없이 작동합니다. 또한 설명 할 수없는 이유로 요소를 사용하는 것이 아니라 서버 측 감지 를 의미한다고 가정합니다 <noscript>.

서버 측 JavaScript 감지를 수행하는 좋은 방법은 없습니다. 대안으로 JavaScript를 사용하여 쿠키 를 설정 한 다음 후속 페이지보기에서 서버 측 스크립팅을 사용하여 해당 쿠키를 테스트 할 수 있습니다. 그러나 쿠키가없는 방문자를 쿠키를 차단하는 신규 방문자 또는 방문자와 구별 할 수 없으므로 전달할 컨텐츠를 결정하는 데 적합하지 않습니다.

— ashleedawg
소스
129
<noscript>는 자바 스크립트가 아닌 콘텐츠를 지정하는 가장 의미 론적으로 정확한 방법입니다. 대신 자바 스크립트가 비활성화되어 있는지 감지하고 활성화되어 있는지 감지하십시오. 따라서 기본적으로 "내 사이트를 올바르게 사용하려면 자바 스크립트가 필요합니다"라는 메시지가 표시되지만 즉시 onLoad에서 자바 스크립트 함수로 숨 깁니다.
— matt lohkamp
58
@matt lohkamp : 또는 기본적으로 메시지를 숨기고 숨기기를 해제 할 <style>블록을 넣습니다 <noscript>(JS가 활성화 된 경우 리플 로우 없음). 놀랍게도, 이것은 모든 최신 브라우저에서 작동하며 IE6에서도 작동합니다.
— Piskvor
7
@ matt-잠시 동안이 작업을 수행했지만 느린 연결에서 메시지가 잠시 동안 유지되어 사용자를 혼란스럽게합니다. 나는 다른 해결책을 찾고 있습니다. @Piskvor-헤더의 <noscript> 태그는 유효성을 검사하지 않으며 본문의 <style> 태그는 유효성을 검사하지 않습니다.
— Ben
20
... 왜 유효성 검사에 관심이 있습니까? 당신은 단지 유효성 검사를 확인하고 있습니까? "정확한"것은 아니지만 작동하고 "후드 아래에 약간의 먼지가있는"작업을 수행하면 문제가 무엇입니까? 걱정하지 마세요, 나는 판단하지 않습니다 ;-)
— keif
4
<noscript> 태그 내의 주어진 요소에 style 속성을 사용하는 경우 (예 : <noscript> <div style = "color : red;"> blahblah </ div> </ noscript> 또는 유사) . 그러나 <style> BLOCK을 일반적으로 일부 .noscript (또는 유사한) 클래스 요소의 스타일을 정의하는 헤더에 넣고 본문에서 <noscript> 태그 내에 넣으면 주어진 요소에 이전에이 같은 .noscript 클래스를 정의 : <NOSCRIPT> <DIV 클래스 = "NOSCRIPT"> blahblah </ DIV> </ NOSCRIPT>
— Sk8erPeter
360

여기에 .02를 추가하고 싶습니다. 100 % 방탄은 아니지만 충분하다고 생각합니다.

"이 사이트는 Javascript 없이는 제대로 작동하지 않습니다"라는 메시지를 표시하는 기본 예제와 관련하여 문제는 Javascript없이 사이트가 제대로 작동하는지 확인해야한다는 것입니다. 그리고 일단 그 길을 시작하면 JS가 꺼진 상태에서 사이트가 방탄되어야한다는 것을 깨닫기 시작합니다. 이는 추가 작업의 큰 부분입니다.

그래서 당신이 정말로 원하는 것은 "JS를 켭니다"라고 쓰여진 페이지로의 "리디렉션"입니다. 그러나 물론 메타 리디렉션을 안정적으로 수행 할 수는 없습니다. 제안은 다음과 같습니다. 

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.  Good luck with that.
    </div>
</noscript>

... 사이트의 모든 콘텐츠가 "pagecontainer"클래스로 래핑됩니다. 그런 다음 noscript 태그 내의 CSS는 모든 페이지 내용을 숨기고 표시하려는 "JS 없음"메시지를 표시합니다. 이것은 실제로 Gmail 이하는 것처럼 보입니다 ... Google에 충분하다면 내 작은 사이트에도 충분합니다.

— hairbo
소스
12
@steve는 google.com의 유효성을 검사하려고합니까? 유효성 검사는 문서가 사양서를 따르는 정도를 결정하며 페이지의 유용성에는 영향을주지 않습니다.
— JKirchartz
71
@JonasGeiregat 웹앱이 빌드되어 있고 자바 스크립트가 작동해야하는 경우 사용자에게 자바 스크립트가 필요하도록하는 것은 무엇이 문제입니까? 이 의견이 너무 자주 들리지만 가장 간단한 사이트에만 유효합니다. JS없이 Facebook을 사용해보고 어떻게되는지 확인하십시오. 앱이 자바 스크립트 용으로 제작 된 경우 99 %의 사용자가 활성화해야하는 문제는 무엇입니까?
— Lee Benson
19
@Lee는 못에 부딪친 다. 지원 대상에 선을 그리기 전에는 사용자를 위해서만 할 수있다. 우리는 모든 사용자가 인터넷을 사용할 수있는 장치를 가지고있을 것으로 기대합니다. 인터넷 액세스를 거부하는 사람들을 위해 내 사이트의 종이 버전도 구현해야합니까?
— Kolors
14
@ Kolors, 나는 2012 년 3 월에 그 의견을 다시 말했고, 오늘은 그것이 사실이라고 주장합니다. 그 이후로, 우리는 Meteor, Angular.Js, Famo.us 및 Javascript를 시작 해야하는 수많은 놀라운 라이브러리를 가지고 있었습니다. JS를 사용하지 않도록 선택한 사용자가 실제로 달성하려고하는 것이 무엇인지 궁금합니다 ... 명확하게, 그들은 우리와 같은 웹을 서핑하지 않으며 회사가 가장 작은 웹 사이트를 축소해야 할 이유가 없습니다. 완고한 사용자의 하위 집합 ...
— 리 벤슨
6
예, JS를 활성화하는 것을 잊었 기 때문에 왜 귀하의 답변을지지 할 수 없는지 궁금했습니다 :-)) 솔루션을 좋아하고 구현합니다! 감사!
— 가라 바니
198

noscript 블록은 자바 스크립트가 비활성화되면 실행되며 일반적으로 자바 스크립트에서 생성 한 대체 콘텐츠를 표시하는 데 사용됩니다 (예 :

<script type="javascript">
    ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
    <a href="next_page.php?nojs=1">Next Page</a>
</noscript>

js가없는 사용자는 next_page링크 를 얻을 수 있습니다-여기에 매개 변수를 추가하여 JS / non-JS 링크를 통해 왔는지 여부를 알 수 있도록 여기에 매개 변수를 추가하거나 JS를 통해 쿠키를 설정하려고 시도하면 JS를 의미합니다 비활성화되어 있습니다. 이 두 가지 예는 상당히 사소하고 조작에 개방적이지만 아이디어를 얻습니다.

몇 명의 사용자가 자바 스크립트를 사용 중지했는지에 대한 순수하게 통계적인 아이디어를 원한다면 다음과 같이 할 수 있습니다.

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

그런 다음 액세스 로그를 확인하여이 이미지가 몇 번 조회되었는지 확인하십시오. 약간 조잡한 솔루션이지만 사용자 기반에 맞는 아이디어를 백분율로 제공합니다.

위의 접근 방식 (이미지 추적)은 텍스트 전용 브라우저 또는 js를 전혀 지원하지 않는 브라우저에서는 제대로 작동하지 않으므로 사용자 기반이 주로 해당 영역으로 스윙하면 이것이 최선의 접근 방식이 아닐 수 있습니다.

— ConroyP
소스
7
이것은 효과적이지 않습니다. 예를 들어, 일반적으로 JavaScript를 지원하지 않는 텍스트 전용 브라우저를 가진 사람은 포함되지 않습니다. 최소한 해당 이미지에 대한 캐싱을 비활성화해야합니다.
— Jim
3
JS를 전혀 지원하지 않는 브라우저는 단순히 noscript 태그를 무시하고 이미지를 표시하지 않습니까?
— LKM
1
@ LKM : 작성 방법에 따라, 아마도 그럴 것이므로 1x1px 도트로 만들 것입니다. 이 옵션은 주로 서버 측에서 사용 패턴을 추적하기위한 것이므로 자바 스크립트 기능이없는 사용자에 의해 트리거되므로 여전히 정상입니다.
— ConroyP
현재 IE8에 버그가 있고 스타일을 지정하면 noscript 태그가 있습니다 ... positioniseverything.net/explorer.html 참조
— alex
2
또한이 이미지를 서버 측 스크립트로 제공하고 MIME 유형을 설정하고이를 사용하여 사용자에 대한 일부 정보를 기록하거나 쿠키를 삭제할 수 있습니다 ... px.sklar.com/code.html/id=256
— JKirchartz
46

이것은 나를 위해 일한 것입니다 : 자바 스크립트가 비활성화되면 방문자를 리디렉션합니다

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>
— Ernie13
소스
6
유효하지 않습니다. noscript 요소는 메타 요소를 포함 할 수 없습니다. 다른 방법으로 오류 복구를 수행 할 수 있으므로 모든 브라우저 (현재 테스트 할 수없는 향후 브라우저 포함)에서 안정적으로 작동한다고 믿지 않습니다.
— Quentin
15
이것은 유효하지 않지만 Facebook의 코드를 보면 <head> 부분에서 동일한 솔루션을 사용합니다. Facebook 코드가 유효한 코드와 거리가 멀기 때문에 매우 좋은 해결책은 아닙니다. 많은 사용자의 브라우저에서 작동하며 중요한 측면이 될 수 있습니다. 그러나 실제로 제안되지 않았다는 것은 사실입니다. 이것은 그들의 코드 : <NOSCRIPT> <메타 HTTP-당량 = 새로 고침 내용 = "0; URL = / 약 / 메시지 / _ fb_noscript = 1"/> </ NOSCRIPT>
— Sk8erPeter
IE9 (적어도)에는 "META REFRESH 허용"설정이 있습니다. 나는 그것을 많이 끄는 것 같지는 않지만 아마도 자바 스크립트를 좋아하지 않는 사람들은하지만 100 %를 원한다면 그렇지 않습니다.
— jenson-button-event
HTML5에서 유효합니다.
— Naszta
1
이것은 Linkedin에서 공유하려고 할 때 링크를 파괴합니다. 어려운 방법을 발견했습니다 ... 이것은 좋은 생각이 아닙니다. 링크 인은 메타 새로 고침을 따르므로 Og 태그 등을 무시합니다.
— SomeDudeSomewhere
44

유스 케이스에 양식 (예 : 로그인 양식)이 있고 서버 측 스크립트가 사용자에게 JavaScript가 사용 가능한지 알아야하는 경우 다음과 같이 할 수 있습니다.

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

양식을 제출하기 전에 js_enabled의 값이 1로 변경됩니다. 서버 측 스크립트가 0을 받으면 JS가없는 것입니다. 1을 받으면 JS!

— 앤드류 헤지스
소스
44

눈에 잘 띄지 않는 JavaScript를 작성하여 다른 방법으로 제안하십시오.

JavaScript가 비활성화 된 사용자에게 프로젝트 기능을 작동시키고 완료되면 JavaScript UI 향상을 구현하십시오.

https://ko.wikipedia.org/wiki/Unobtrusive_JavaScript

— roosteronacid
소스
145
인생이 너무 짧아 2012- 자바 스크립트 사용 또는 집으로 이동
— Yarin
25
"인생이 너무 짧습니다. 2012 년입니다. 자바 스크립트를 사용하거나 집으로 돌아갑니다!" JS가없는 경우 표시 할 완벽한 작은 메시지입니다. 기록 당신에게에 그 @Yarin
5
나는 또한 그것이 굉장하다고 말하기 위해 로그인했습니다! @ 야린. 나는 일반적으로 공개되지 않는 작은 사이트를 만들고 있습니다 (인트라넷과 같은 것이 아니라 친구가 함께 프로젝트를 진행하기 위해 생각하십시오). 나는 그것을 SPA로 만들고 폴백을 귀찮게하지 않습니다. 눈에 잘 띄지 않는 JavaScript는 SPA 개념에 적용하는 작업량의 거의 두 배입니다. Knockout, Jquery와 같은 최신 Javascript 라이브러리를 사용하면 모든 사이트를 쉽게 "부당하지 않게"만들 수는 없다는 사실 만 받아 들여야합니다. 자바 스크립트는 웹의 미래입니다.
— lassombra
5
@Yarin 나는 결코 폴백에 넣지 않은 생활을 위해 PHP / JS 응용 프로그램을 빌드합니다 ... 다른 사람이 저에게 연락하지 않으면 과거에 생활을 멈추고 JS를 활성화하도록 지시합니다.
— Sam
2
@ n611x007-비 윤리적 인 것들은 서버 나 클라이언트 쪽이든 모든 장치에서 모든 코드에 숨겨져 있습니다. 그것은 코드 결함이 아니라 인간의 결함입니다. 여전히 제 3 자 ISP를 사용하여 인터넷에 연결하고, 여전히 제 3 자 하드웨어 / 펌웨어가있는 컴퓨터를 사용하고, 제 3 자 주사로 액세스 할 수있는 안전하지 않은 셀 네트워크를 사용하고, 여전히 타사 비 패치 OS, 여전히 타사 전체 공개 업데이트 서비스 등을 사용하는 평면 TV를 사용합니다. 브라우저에서 JS를 끄는 지 여부에 관계없이 항상 MITM 채널의 대상이됩니다.
— dhaupin 2016 년
35

<noscript>XHTML에서는 지원되지 않으며 언급 할 필요도 없습니다 .

작업 예 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

이 예에서 JavaScript가 활성화 된 경우 사이트가 나타납니다. 그렇지 않으면 "JavaScript를 활성화하십시오"메시지가 표시됩니다. JavaScript가 활성화되어 있는지 테스트하는 가장 좋은 방법은 JavaScript를 시도하여 사용하는 것입니다! 작동하면 활성화되어 있고 활성화되어 있지 않으면 활성화되어 있지 않은 것입니다.

— de Raad
소스
1
하, XHTML. 그 시절은 ... 많은 것들이 바뀌 었습니다. developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
— Stephan Weinhold
왜 jquery를 사용 하는가?
— Luis Villavicencio
@StephanWeinhold, JSF는 XHTML을 사용합니다.
— 아라 쉬
34

본문에 .no-js 클래스를 사용하고 .no-js 상위 클래스를 기반으로 비 Javascript 스타일을 작성하십시오. 자바 스크립트가 비활성화되면 자바 스크립트가 아닌 모든 스타일을 얻게됩니다. JS 지원이 있으면 .no-js 클래스가 대체되어 평소와 같이 모든 스타일을 제공합니다.

 document.body.className = document.body.className.replace("no-js","js");

modernizr을 통해 HTML5 상용구에 사용되는 트릭 http://html5boilerplate.com/ 하지만 한 줄의 자바 스크립트를 사용하여 클래스를 바꿀 수 있습니다

noscript 태그는 괜찮지 만 CSS로 할 수있을 때 HTML에 추가 항목이있는 이유

— 회전식 Grundizer
소스
5
누군가가 .nojs수업을 언급하기까지 오랜 시간이 걸렸다 고 믿을 수 없습니다 ! 이것은 가장 완벽한 접근 방식 중 하나이며 noscript수치를 당합니다.
— Moses
15

조금 힘들지만 (hairbo는 나에게 아이디어를 주었다)

CSS :

.pagecontainer {
  display: none;
}

JS :

function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

HTML :

<body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

어떤 경우에도 제대로 작동합니까? noscript 태그가 지원되지 않는 경우 (일부 CSS 만 필요) 비 CSS 솔루션을 아는 사람이 있습니까?

— borrel
소스
13

간단한 JS 스 니펫을 사용하여 숨겨진 필드의 값을 설정할 수 있습니다. 다시 게시하면 JS가 활성화되었는지 여부를 알 수 있습니다.

또는 빠르게 닫히는 팝업 창을 열려고해도 표시 될 수 있습니다.

또한 JS가 비활성화 된 브라우저의 텍스트를 표시하는 데 사용할 수있는 NOSCRIPT 태그가 있습니다.

— rslite
소스
이것은 좋은 대답이 아닙니다. 첫 번째 솔루션에는 페이지를 다시로드하고 양식을 제출해야합니다. 두 번째 솔루션은 팝업 (ack!)을 열고 클라이언트 측에서 "빠르게"닫는가? -1
— Ben
사이트에서 JS가 활성화되어 있는지 여부에 따라 서버 측을 알아야 할 때가 있기 때문에 무언가를 다시 게시하는 것 외에는 어떻게 할 수 있는지 알 수 없습니다. 팝업이보기 흉하지 않다는 것에 동의합니다. 실제로 이것에 대해 확신하지 못하지만 화면의 가시 영역 밖에서 팝업을 열어서 사용자가 방해받지 않도록해야합니다. 우아하지는 않지만 작동하며 페이지를 다시로드하지 않습니다.
— rslite
Spambots는 숨겨진 필드에도 게시합니다.
— Janis Veinbergs
13

noscript 태그를 살펴보고 싶을 것입니다.

<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>
— anon
소스
12

noscript 태그는 잘 작동하지만 기본적으로 noscript는 클라이언트 측 검사이므로 쓸모없는 JS 파일을 계속 제공하려면 각 추가 페이지 요청이 필요합니다.

JS로 쿠키를 설정할 수 있지만 다른 사람이 지적한 것처럼 실패 할 수 있습니다. 이상적으로, JS 클라이언트 측을 감지하고 쿠키를 사용하지 않고 JS가 사용 가능함을 표시하는 해당 사용자에 대한 세션 서버 측을 설정하십시오.

src 속성이 실제로 서버 측 스크립트 인 JavaScript를 사용하여 1x1 이미지를 동적으로 추가 할 수 있습니다. 이 스크립트는 JS가 활성화 된 현재 사용자 세션 ($ _SESSION [ 'js_enabled'])에 저장합니다. 그런 다음 1x1 빈 이미지를 브라우저로 다시 출력 할 수 있습니다. JS가 비활성화 된 사용자에게는이 스크립트가 실행되지 않으므로 $ _SESSION [ 'js_enabled']가 설정되지 않습니다. 그런 다음이 사용자에게 제공되는 추가 페이지의 경우 모든 외부 JS 파일을 포함할지 여부를 결정할 수 있지만 일부 사용자는 NoScript Firefox 애드온을 사용하거나 JS가있을 수 있으므로 항상 확인을 포함해야합니다. 다른 이유로 일시적으로 사용 중지되었습니다.

추가 HTTP 요청으로 인해 페이지 렌더링 속도가 느려지지 않도록 페이지 끝에 가까운 곳에이 검사를 포함하고 싶을 것입니다.

— 데이비드 위즈
소스
12

이것을 각 페이지의 HEAD 태그에 추가하십시오.

<noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>

그래서 당신은 :

<head>
    <noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
    </noscript>
</head>

Jay에게 감사합니다.

— the_seeker_who
소스
12

나는 항상 브라우저가 볼만한 가치가있는 것을주고 싶기 때문에 종종이 트릭을 사용합니다.

첫째, getElementById 호출 등을 통해 수정되는 수동 HTML 요소를 포함하여 JavaScript를 올바르게 실행해야하는 페이지의 일부는 JavaScript를 사용할 수 없다는 가정하에 그대로 사용할 수 있도록 설계되었습니다. (없는 것처럼 디자인)

JavaScript가 필요한 모든 요소는 다음과 같은 태그 안에 넣습니다.

<span name="jsOnly" style="display: none;"></span>

그런 다음 내 문서의 시작 부분에, 내가 사용 .onload또는 document.ready의 루프 내 getElementsByName('jsOnly')세트에 .style.display = "";선회 JS 의존 요소에 백업 할 수 있습니다. 이런 방식으로 JS가 아닌 브라우저는 사이트의 JS 종속 부분을 볼 필요가 없으며 사이트가 있으면 준비가되면 즉시 나타납니다.

이 방법에 익숙해지면 두 가지 상황을 처리하기 위해 코드를 하이브리드 화하는 것이 매우 쉽습니다.하지만 이제는 noscript태그를 실험하고 몇 가지 추가적인 이점이있을 것으로 기대합니다.

— Brian
소스
10

이것은 "가장 깨끗한"솔루션 아이디입니다.

<noscript>
    <style>
        body *{ /*hides all elements inside the body*/
            display: none;
        }
        h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
            display: block;
        }
    </style>
    <h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>
— 알파 2k
소스
9

일반적인 해결책은 noscript와 함께 메타 태그를 사용하여 다음과 같이 JavaScript를 사용할 수 없을 때 페이지를 새로 고치고 서버에 알리는 것입니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <noscript>
            <meta http-equiv="refresh" content="0; /?javascript=false">
        </noscript>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
</html>

위의 예제에서 JavaScript가 비활성화되면 브라우저는 0 초 안에 웹 사이트의 홈 페이지로 리디렉션합니다. 또한 javascript = false 매개 변수를 서버로 보냅니다.

그런 다음 node.js 또는 PHP와 같은 서버 측 스크립트는 매개 변수를 구문 분석하고 JavaScript가 사용 불가능 함을 알게됩니다. 그런 다음 웹 사이트의 특수한 비 JavaScript 버전을 클라이언트로 보낼 수 있습니다.

— 우메시 파틸
소스
8

자바 스크립트가 비활성화되면 클라이언트 쪽 코드가 실행되지 않으므로 해당 정보를 서버 쪽에서 사용할 수 있다고 가정합니다. 이 경우 noscript 가 도움이되지 않습니다. 대신 숨겨진 입력이 있고 자바 스크립트를 사용하여 값을 채 웁니다. 다음 요청 또는 포스트 백 후 값이 있으면 Javascript가 켜져 있음을 알 수 있습니다.

첫 번째 요청에서 자바 스크립트가 비활성화 된 것으로 표시 될 수 있지만 향후 요청시이를 활성화하는 noscript와 같은 사항에주의하십시오.

— Joel Coehoorn
소스
5

예를 들어 document.location = 'java_page.html'과 같은 것을 사용하여 브라우저를 새로운 스크립트가 포함 된 페이지로 리디렉션 할 수 있습니다. 리디렉션이 실패하면 JavaScript를 사용할 수 없다는 의미이며,이 경우 CGI 루트에 의존하거나 태그 사이에 적절한 코드를 삽입 할 수 있습니다. (참고 : NOSCRIPT는 Netscape Navigator 3.0 이상에서만 사용할 수 있습니다.)

크레딧 http://www.intranetjournal.com/faqs/jsfaq/how12.html

— 브래드 8118
소스
4

과거에 사용한 기술은 JavaScript를 사용하여 JavaScript가 활성화되었다는 플래그 역할을하는 세션 쿠키를 작성하는 것입니다. 그런 다음 서버 측 코드는이 쿠키를 찾고이를 찾지 못하면 적절한 조치를 취합니다. 물론이 기술은 쿠키 사용에 의존합니다!

— 존 토플 리
소스
4

이미지 태그를 noscript 태그에 삽입하고 사이트 수와이 이미지가 얼마나 자주로드되었는지 통계를 확인할 수 있다고 생각합니다.

— 미스터 볼리
소스
4

사람들은 이미 탐지에 적합한 옵션 인 예제를 게시했지만 "JS를 사용하도록 설정 한 브라우저가 없으면 사이트가 제대로 작동하지 않는다는 경고"요구 사항을 기반으로합니다. 기본적으로 적절한 메시지와 함께 배지를 얻을 때 스택 오버플로의 '팝업'과 같이 페이지에 어떻게 든 나타나는 요소를 추가 한 다음 페이지가로드되는 즉시 실행되는 Javascript 로이 요소를 제거하십시오 ( 그리고 전체 페이지가 아닌 DOM을 의미합니다).

— 로리 프
소스
3

무엇을 감지합니까? 자바 스크립트? 불가능합니다. 로깅 목적으로 만 사용하려는 경우 일종의 추적 체계를 사용할 수 있습니다. 여기서 각 페이지에는 특수 자원 (아마도 매우 작 gif거나 유사한)을 요청하는 JavaScript가 있습니다. 이렇게하면 고유 한 페이지 요청과 추적 파일 요청 간의 차이를 취할 수 있습니다.

— 행크 게이
소스
3

JS가 활성화 된 경우에만 발생하는 하이재킹 된 onClick () 이벤트 핸들러를 배치하고이를 사용하여 클릭 / 선택된 URL에 매개 변수 (js = true)를 추가하지 마십시오 (드롭 다운 목록도 감지 할 수 있음) 숨겨진 양식 필드 추가 값 변경). 이제 서버 가이 매개 변수 (js = true)를 볼 때 JS가 활성화되었음을 알고 멋진 논리 서버 측을 수행합니다.
단점은 사용자가 사이트, 북마크, URL, 검색 엔진 생성 URL을 처음 방문 할 때 이것이 새로운 사용자임을 감지해야하기 때문에 URL에 추가 된 NVP를 찾지 마십시오. 서버는 다음 클릭을 기다려 사용자가 JS 활성화 / 비활성화 상태인지 확인해야합니다. 또한 또 다른 단점은 URL이 브라우저 URL에서 끝나고이 사용자 가이 URL을 북마크하면 사용자가 JS를 활성화하지 않아도 js = true NVP를 갖게된다는 것입니다. 다음 번 클릭에서 서버는 사용자가 여전히 JS를 사용하도록 설정했는지 여부를 알고 있어야합니다. 한숨 .. 재밌다 ...

— FirstSOURCE
소스
3

사용자가 JavaScript를 활성화하도록하려면 각 링크의 'href'속성을 동일한 문서로 설정하여 JavaScript를 활성화하거나 Firefox를 다운로드하도록 알려줍니다 (JavaScript를 활성화하는 방법을 모르는 경우). 실제 링크 URL을 링크의 'name'속성에 저장하고 'name'속성을 읽고 페이지를 리디렉션하는 전역 onclick 이벤트를 정의했습니다.

이것은 약간 파시스트이지만 내 사용자 기반에서 잘 작동합니다.).

— 얀 사힌
소스
진보적 인 자바 스크립트가 시작되기 전에 사용자가 JS를 활성화하고 링크를 클릭하면 약간 성가 시게됩니다.
— Simon_Weaver
1
물론 문제는 아직보고되지 않았습니다.
— Jan Sahin
3

사용자가 자바 스크립트를 사용 중지했는지 (서버 측 또는 클라이언트) 감지하지 못했습니다. 대신 자바 스크립트가 비활성화되어 있다고 가정하고 자바 스크립트가 비활성화 된 웹 페이지를 작성하십시오. 이것은의 필요성을 없애줍니다. noscript어쨌든 제대로 작동하지 않고 불필요하므로 사용을 피해야합니다.

예를 들어 사이트를 구축하여 <div id="nojs">This website doesn't work without JS</div>

그런 다음 스크립트는 단순히 document.getElementById('nojs').style.display = 'none';일반적인 JS 비즈니스 를 수행 하고 수행 합니다.

— 폭발 알약
소스
이것은 매우 완벽한 접근 방식입니다. <noscript> 태그는 다른 페이지에서 유지하기가 훨씬 어렵습니다.이 접근 방식을 사용하면 CSS 파일을 통해 noscript 스타일을 유지할 수 있습니다.
— zadubz
3

순수한 서버 측 솔루션을 사용하여 쿠키를 확인하고 여기에 소개 한 다음 Jquery.Cookie를 사용하여 쿠키를 삭제하여 자바 스크립트를 확인 한 다음 쿠키를 확인하십시오.

— 레브 스
소스
3

경우에 따라 거꾸로해도됩니다. 자바 스크립트를 사용하여 클래스를 추가하십시오.

// Jquery
$('body').addClass('js-enabled');

/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}

이로 인해 복잡한 작업에서 유지 관리 문제가 발생할 수 있지만 몇 가지 간단한 수정 사항입니다. 로드되지 않은시기를 감지하는 대신로드 된시기에 따라 스타일을 지정하십시오.

— 제니퍼 미셸
소스
3

전체 사용자에 대해 자바 스크립트를 비활성화 한 상태에서 실제 사용자가 얼마나 많은 사이트를 방문했는지에 대한 안정적인 통계를 얻으려면 솔루션을 추가하고 싶습니다. 확인은 다음과 같은 이점이있는 세션 당 한 번만 수행됩니다.

  • 100 페이지를 방문하거나 1 개만 방문한 사용자는 각각 1 개로 계산됩니다. 이를 통해 페이지가 아닌 단일 사용자에게 집중할 수 있습니다.
  • 어쨌든 페이지 흐름, 구조 또는 의미를 손상시키지 않습니다.
  • 사용자 에이전트를 기록 할 수 있습니다. 이를 통해 일반적으로 JS가 비활성화 된 google bot 및 bing bot과 같은 통계에서 봇을 제외 할 수 있습니다! IP, 시간 등을 기록 할 수도 있습니다.
  • 세션 당 한 번만 확인 (최소 과부하)

내 코드는 PHP, mysql 및 jquery를 ajax와 함께 사용하지만 다른 언어로 조정할 수 있습니다.

다음과 같이 DB에 테이블을 만듭니다.

CREATE TABLE IF NOT EXISTS `log_JS` (
  `logJS_id` int(11) NOT NULL AUTO_INCREMENT,
  `data_ins` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `session_id` varchar(50) NOT NULL,
  `JS_ON` tinyint(1) NOT NULL DEFAULT '0',
  `agent` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`logJS_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

session_start () 또는 동등한 항목 (jquery 필요)을 사용한 후 모든 페이지에 이것을 추가하십시오.

<?  if (!isset($_SESSION["JSTest"]))
    { 
        mysql_query("INSERT INTO log_JS (session_id, agent) VALUES ('" . mysql_real_escape_string(session_id()) . "', '" . mysql_real_escape_string($_SERVER['HTTP_USER_AGENT']). "')"); 
        $_SESSION["JSTest"] = 1; // One time per session
        ?>
        <script type="text/javascript">
            $(document).ready(function() { $.get('JSOK.php'); });
        </script>
        <?
    }
?>

다음과 같이 JSOK.php 페이지를 작성하십시오.

<?
include_once("[DB connection file].php");   
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");
— 2 revs
소스
3

CSS와 자바 스크립트 자체를 사용하는 또 다른 접근법을 알아 냈습니다.
이것은 클래스와 ID로 땜질을 시작하는 것입니다.

CSS 스 니펫 :
1. CSS ID 규칙을 만들고 이름을 #jsDis로 지정합니다.
2. BODY 요소 다음에 텍스트를 생성하려면 "content"속성을 사용하십시오. 원하는대로 스타일을 지정할 수 있습니다.
3 두 번째 CSS ID 규칙을 생성하고 이름을 #jsEn로 지정하고 스타일을 지정하십시오. (간단하게하기 위해 #jsEn 규칙에 다른 배경색을 지정했습니다.

<style>
#jsDis:after {
    content:"Javascript is Disable. Please turn it ON!";
    font:bold 11px Verdana;
    color:#FF0000;
}

#jsEn {
    background-color:#dedede;
}

#jsEn:after {
    content:"Javascript is Enable. Well Done!";
    font:bold 11px Verdana;
    color:#333333;
}
</style>

자바 스크립트 스 니펫 :
1. 함수를 만듭니다.
2. getElementById를 사용하여 BODY ID를 잡고 변수에 지정하십시오.
3. JS 함수 'setAttribute'를 사용하여 BODY 요소의 ID 속성 값을 변경하십시오.

<script>
function jsOn() {
    var chgID = document.getElementById('jsDis');
    chgID.setAttribute('id', 'jsEn');
}
</script>

HTML 부분.
1. ID가 #jsDis 인 BODY 요소 속성의 이름을 지정하십시오.
2. 함수 이름으로 onLoad 이벤트를 추가하십시오. (jsOn ()).

<body id="jsDis" onLoad="jsOn()">

BODY 태그에 #jsDis의 ID가 부여되었습니다.
-Javascript가 활성화 된 경우 BODY 태그의 속성이 자체적으로 변경됩니다.
-자바 스크립트가 비활성화 된 경우 CSS 'content :'규칙 텍스트가 표시됩니다.

#wrapper 컨테이너 또는 JS를 사용하는 모든 DIV를 가지고 놀 수 있습니다.

이것이 아이디어를 얻는 데 도움이되기를 바랍니다.

— 크리스 페소 아
소스
2

noscript 안에 메타로 새로 고침을 추가하는 것은 좋은 생각이 아닙니다.

  1. noscript 태그는 XHTML과 호환되지 않기 때문에

  2. 속성 값 "새로 고침"은 비표준이므로 사용해서는 안됩니다. "새로 고침"은 사용자가 페이지를 제어하지 못하게합니다. "새로 고침"을 사용하면 W3C의 웹 컨텐츠 액세스 가능성 지침에서 오류가 발생합니다 . --- 참조 http://www.w3schools.com/TAGS/att_meta_http_equiv.asp

— 가우 라브 탈와 르
소스
XHTML에 대해서는 아무 말도하지 않았습니다. <noscript>는 완벽하게 유효한 HTML 4.01입니다.
— Tom
2
noscript는 XHTML 1.0 및 XHTML 1.1에서도 완벽하게 유효합니다. 메타 요소를 포함 할 수 없으며 점진적인 향상을 위해 피해야하지만 언어의 일부입니다.
— Quentin
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.