JavaScript가 비활성화되어 있는지 여부를 검출하는 방법
오늘 아침 몇 명의 사람들이 JavaScript를 비활성화했는지 묻는 게시물이 있었다.그 후, 유저가 그것을 무효로 하고 있는지를 판단하기 위해서 어떤 기술을 사용할 수 있는지 궁금해지기 시작했습니다.
JavaScript가 비활성화되어 있는지 여부를 검출하는 간단한 방법을 알고 있는 사람이 있습니까?브라우저가 JS를 활성화하지 않으면 사이트가 제대로 작동하지 않는다는 경고를 하려는 것입니다.
최종적으로 JS가 없어도 동작할 수 있는 콘텐츠로 리다이렉트 하고 싶지만, 플레이스 홀더로서 이 검출이 필요합니다.
여기에 0.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는 모든 페이지 내용을 숨기고 대신 표시하는 "no JS" 메시지를 표시합니다.이게 Gmail이 실제로 하는 것처럼 보이는...구글에 충분하다면 내 작은 사이트에도 충분합니다.
JavaScript 강화 콘텐츠 전송 여부를 결정하려고 합니다.최상의 구현은 완전히 저하되므로 사이트는 JavaScript 없이 계속 작동합니다.또, 원인을 알 수 없는 이유로 요소를 사용하는 것이 아니라, 서버측의 검출을 의미한다고 생각됩니다.
서버측 JavaScript 검출을 실행하는 좋은 방법은 없습니다.또는 JavaScript를 사용하여 쿠키를 설정하고 이후 페이지 뷰에서 서버 측 스크립트를 사용하여 쿠키를 테스트할 수도 있습니다.그러나 이것은 쿠키가 없는 방문자와 새로운 방문자 또는 JavaScript set cookie를 받아들이지 않는 방문자를 구분하지 않기 때문에 어떤 콘텐츠를 전달할지 결정하는 데 적합하지 않습니다.
noscript 블록은 JavaScript가 비활성화되면 실행되며 일반적으로 JavaScript에서 생성한 대체 콘텐츠를 표시하는 데 사용됩니다.
<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_pagelink - 파라미터가 JS/non-JSJS를 알 수 여기에 할 수 되어 있음을 합니다.link - "JS/non-JS"는 JSnon-JS가 비활성화되어 있음을 의미합니다.JS에 관한 정보입니다.이 두 가지 예는 모두 매우 사소하고 조작하기 쉽지만 이해하실 수 있습니다.
javascript가 비활성화되어 있는 사용자의 수를 통계적으로만 알고 싶다면 다음과 같은 작업을 수행할 수 있습니다.
<noscript>
<img src="no_js.gif" alt="Javascript not enabled" />
</noscript>
액세스 로그를 체크하고, 이 이미지가 히트한 회수를 확인합니다.다소 조잡한 솔루션이지만 사용자 기반에 대해 백분율로 좋은 아이디어를 얻을 수 있습니다.
위의 접근법(이미지 트래킹)은 텍스트 전용 브라우저나 js를 전혀 지원하지 않는 브라우저에서는 잘 동작하지 않기 때문에 사용자 기반이 주로 해당 영역으로 이동한다면 이는 최선의 접근법이 아닐 수 있습니다.
이것은 나에게 효과가 있었다: javascript가 비활성화되어 있는 경우 방문자를 리다이렉트한다.
<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>
눈에 띄지 않는 JavaScript를 작성함으로써 다른 방법을 제안합니다.
JavaScript가 비활성화된 사용자에게 프로젝트의 기능을 제공하고, 작업이 끝나면 JavaScript UI 확장 기능을 구현하십시오.
https://en.wikipedia.org/wiki/Unobtrusive_JavaScript
폼(로그인 폼 등)이 있고 서버측 스크립트가 사용자가 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!
<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가 네이블로 되어 있으면 사이트가 표시됩니다.그렇지 않으면 "Please enable JavaScript" 메시지가 나타납니다.JavaScript를 사용할 수 있는지 테스트하는 가장 좋은 방법은 JavaScript를 사용해 보는 것입니다.작동하면 활성화되고, 그렇지 않으면 활성화되지 않습니다.
본문에 .no-js 클래스를 사용하여 .no-js 부모 클래스를 기반으로 Javascript 이외의 스타일을 만듭니다.javascript가 비활성화되어 있으면 javascript 이외의 모든 스타일을 얻을 수 있습니다.JS 지원이 있으면 .no-js 클래스가 대체되어 모든 스타일이 정상적으로 제공됩니다.
document.body.className = document.body.className.replace("no-js","js");
html5 boorplate http://html5boilerplate.com/에서 moderizr을 통해 사용되는 트릭이지만 javascript 한 줄을 사용하여 클래스를 대체할 수 있습니다.
noscript 태그도 괜찮지만 css로 할 수 있는데 왜 html에 추가 내용이 있습니까?
조금 힘들지만 (헤어보가 아이디어를 줬다)
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 이외의 솔루션을 알고 있는 사람이 있습니까?
단순 JS 스니펫을 사용하여 숨겨진 필드의 값을 설정할 수 있습니다.다시 게시하면 JS가 활성화되었는지 여부를 알 수 있습니다.
또는 빠르게 닫은 팝업창을 열려고 할 수도 있습니다(보여질 수도 있습니다).
또한 NOSCRIPT 태그를 사용하여 JS가 비활성화된 브라우저의 텍스트를 표시할 수 있습니다.
코스크립트 태그를 살펴봐야 할래요?
<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>
항상 브라우저에 유용한 정보를 주고 싶기 때문에 다음 방법을 자주 사용합니다.
먼저 JavaScript가 정상적으로 실행되도록 필요한 페이지(getElementById 호출 등을 통해 수정되는 패시브 HTML 요소 포함)는 사용 가능한 JavaScript가 없다는 전제 하에 그대로 사용할 수 있도록 설계되어 있습니다.(존재하지 않는 것처럼 설계)
JavaScript가 필요한 요소는 다음과 같은 태그 안에 넣습니다.
<span name="jsOnly" style="display: none;"></span>
후,에 「 then고내내 then then then 、 「 」.onload ★★★★★★★★★★★★★★★★★」document.ready의 getElementsByName('jsOnly').style.display = "";JS 종속 요소를 다시 켭니다.이렇게 하면 JS가 아닌 브라우저는 사이트의 JS 종속 부분을 볼 필요가 없으며, JS가 있으면 준비가 되면 바로 나타납니다.
두 가지 을 모두 수 코드를 시키는 것은 쉬울 이 하고 있습니다. 하지만 저는 이제 겨우 이 방법을 사용해 실험하고 있습니다.noscript태그를 붙여서 추가 이점을 기대할 수 있습니다.
noscript 태그는 정상적으로 동작하지만 noscript는 기본적으로 클라이언트 측 체크이기 때문에 불필요한 JS 파일을 계속 처리하려면 추가 페이지 요청이 필요합니다.
JS에서 쿠키를 설정할 수 있지만 다른 사용자가 지적한 것처럼 실패할 수 있습니다.이상적으로는 JS 클라이언트 측을 탐지하고 쿠키를 사용하지 않고 해당 사용자에 대해 세션 서버 측을 설정하여 JS가 활성화되었음을 나타냅니다.
src Atribute가 실제로는 서버측 스크립트인 JavaScript를 사용하여 1x1 이미지를 동적으로 추가할 수 있습니다.이 스크립트는 JS가 활성화되어 있는 현재 사용자 세션($_SESS)에 저장하기만 하면 됩니다.ION('js_enabled')그런 다음 1x1 빈 이미지를 브라우저로 출력할 수 있습니다.JS를 사용하지 않도록 설정한 사용자에게는 스크립트가 실행되지 않으므로 $_SESS가ION['js_enabled']가 설정되지 않습니다.그런 다음 이 사용자에게 제공되는 추가 페이지에 대해 모든 외부 JS 파일을 포함할지 여부를 결정할 수 있습니다. 그러나 일부 사용자가 NoScript Firefox 추가 기능을 사용하거나 다른 이유로 일시적으로 JS를 사용하지 않도록 설정할 수 있습니다.
추가 HTTP 요청으로 인해 페이지 렌더링이 느려지지 않도록 페이지 끝에 이 검사를 포함할 수 있습니다.
이것을 각 페이지의 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에게 감사하며.
일반적인 해결책은 메타 태그를 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가 비활성화되었음을 알 수 있습니다.그런 다음 클라이언트에 특별한 비 자바스크립트 버전의 웹 사이트를 전송할 수 있습니다.
가장 깨끗한 솔루션 ID를 사용하는 방법은 다음과 같습니다.
<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>
javascript가 비활성화되어 있으면 클라이언트측 코드가 실행되지 않기 때문에 서버측에서 사용할 수 있는 정보를 원하는 것이겠지요.이 경우 noscript는 도움이 되지 않습니다.대신 숨겨진 입력이 있고 javascript를 사용하여 값을 입력합니다.다음 요청 또는 포스트백 후 값이 있으면 javascript가 켜져 있습니다.
noscript와 같이 첫 번째 요청은 javascript가 비활성화되어 있지만 이후 요청에서는 활성화되어 있는 것에 주의하십시오.
예를 들어 document.location = 'document_page.documents'와 같은 기능을 사용하여 브라우저를 스크립트가 많은 새 페이지로 리디렉션할 수 있습니다.리다이렉트 실패는 JavaScript를 사용할 수 없음을 의미합니다.이 경우 CGI에 의존하거나 태그 사이에 적절한 코드를 삽입할 수 있습니다(주의: NOSCRIpt는 Netscape Navigator 3.0 이상에서만 사용할 수 있습니다).
신용 http://www.intranetjournal.com/faqs/jsfaq/how12.html
제가 과거에 사용한 기술은 자바스크립트를 사용하여 단순히 자바스크립트가 활성화되었음을 나타내는 플래그 역할을 하는 세션 쿠키를 작성하는 것입니다.그런 다음 서버 측 코드가 이 쿠키를 찾고 쿠키가 발견되지 않으면 적절한 조치를 취합니다.물론 이 기술은 쿠키를 활성화해야 합니다.
이미지 태그를 noscript 태그에 삽입하여 사이트 수와 이 이미지가 로드된 빈도를 확인할 수 있습니다.
사람들은 이미 좋은 탐지 옵션인 예를 게시했지만, "브라우저가 JS를 활성화하지 않으면 사이트가 제대로 작동하지 않는다는 경고"를 요구 사항에 따라 게시했습니다.기본적으로 페이지에 표시되는 요소를 추가합니다.예를 들어 배지를 획득했을 때 Stack Overflow에 표시되는 팝업과 같은 적절한 메시지를 추가한 다음 페이지가 로드되는 즉시 실행되는 Javascript를 사용하여 이 요소를 삭제합니다(DOM 전체는 아님).
「」의 <noscript>이렇게 해서 js를 사용할 수 .noscript태그를 사용하여 아래와 같이 JS를 켜는 메시지를 표시합니다.<noscript> <h1 style="text-align: center;">enable java script and reload the page</h1> </noscript> 웹 숨긴 하면서.
<body>
<div id="main_body" style="display: none;">
website content.
</div>
</body>
JS가 켜져 있으면 다음과 같이 본체 내부의 콘텐츠를 표시할 수 있습니다.
<script type="text/javascript">
document.getElementById("main_body").style.display="block";
</script>
JS가 활성화되어 있을 때만 실행되는 하이잭 onClick() 이벤트 핸들러를 놓고 이 핸들러를 사용하여 클릭/선택된 URL에 매개 변수(parameter=true)를 추가하는 것은 어떨까요(드롭다운 목록을 감지하여 숨김 양식 필드 추가 값도 변경할 수 있습니다).따라서 서버는 이 파라미터(syslog=true)를 인식하면 JS가 활성화되어 있음을 인식하고 로직 서버 측에서 작업을 수행합니다.
단점은 사용자가 처음 사이트에 접속했을 때 북마크, URL, 검색 엔진에서 생성된 URL이 새로운 사용자임을 검출해야 하므로 URL에 추가된 NVP를 찾지 않고 서버가 다음 클릭을 기다려 사용자가 JS 활성화/비활성화 여부를 판단해야 한다는 것입니다.또 다른 단점은 URL이 브라우저 URL에 도달하고 이 사용자가 이 URL을 북마크하면 사용자가 JS를 활성화하지 않더라도 js=true NVP를 가지게 된다는 것입니다.다만 다음 클릭 시 서버는 사용자가 여전히 JS를 활성화했는지 여부를 알 수 있습니다....이...
사용자에게 JavaScript를 사용하도록 강제하기 위해 각 링크의 'href' 속성을 동일한 문서에 설정했습니다. 이 문서에서 사용자에게 JavaScript를 사용하도록 알리거나 Firefox를 다운로드(JavaScript를 사용하도록 설정하는 방법을 모를 경우)합니다.링크의 'name' 속성에 실제 링크 URL을 저장하고 'name' 속성을 읽고 페이지를 리다이렉트하는 글로벌 온클릭 이벤트를 정의했습니다.
이것은, 유저 베이스로 유효하게 기능합니다만, 다소 파시스트적인 면도 있습니다.
사용자가 Javascript를 사용하지 않도록 설정했는지(서버 측 또는 클라이언트 측) 알 수 없습니다.대신 javascript가 비활성화되어 있다고 가정하고 javascript가 비활성화되어 있는 웹 페이지를 작성합니다. 하면, 것에,, this this this this this this this this this가 필요 없게 .noscript이 기능은 제대로 작동하지 않고 불필요하기 때문에 사용하지 않는 것이 좋습니다.
를 들어, 그냥 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 이런 식으로 하면 됩니다.<div id="nojs">This website doesn't work without JS</div>
'네'를 한다.document.getElementById('nojs').style.display = 'none';JS에 관한 것입니다.
여기서 소개한 순수 서버 측 솔루션을 사용하여 쿠키를 확인한 후 Jquery를 사용하여 쿠키를 드롭하여 javascript를 확인합니다.쿠키와 Javascript를 모두 체크할 수 있습니다.
경우에 따라서는 거꾸로 하는 것으로 충분할 수 있습니다.javascript를 사용하여 클래스 추가:
// Jquery
$('body').addClass('js-enabled');
/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}
이로 인해 모든 복잡한 부분에서 유지 보수 문제가 발생할 수 있지만, 간단한 해결 방법이 있습니다.로드되지 않은 상태를 감지하기보다는 로드된 시간에 따라 스타일링하십시오.
전체 사용자 중 Javascript가 비활성화된 상태에서 내 사이트를 방문하는 실제 사용자의 수를 신뢰할 수 있는 통계를 얻기 위해 솔루션을 추가하고 싶습니다.체크는 세션별로 1회만 수행되며 다음과 같은 이점이 있습니다.
- 100 페이지 또는 1 페이지만 방문한 사용자는 각각1개씩 카운트 됩니다이를 통해 페이지가 아닌 단일 사용자에게 초점을 맞출 수 있습니다.
- 페이지 흐름, 구조 또는 의미에 영향을 주지 않습니다.
- 사용자 에이전트를 기록할 수 있습니다.이를 통해 일반적으로 JS가 비활성화되어 있는 Google 봇 및 bing 봇과 같은 봇을 통계에서 제외할 수 있습니다.IP, 시간 등을 기록할 수도 있습니다.
- 세션당 1개의 체크만(최소 과부하)
내 코드는 Ajax와 함께 PHP, mysql 및 jquery를 사용하지만 다른 언어에는 적용할 수 있습니다.
다음과 같은 테이블을 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()) . "'");
자체를 사용하여 css는 javascript를 사용합니다.
이것은 단지 수업과 ID를 만지작거리기 위한 것이다.
CSS:
규칙을 을 #1. css ID #jsDis로 합니다.
을 사용하여 뒤에 (할 수 .) 2. "글" "글자" "글자" "글자" "" "글자" "글자" "글자" "글자" "글자" "글자" "글자 스타일링"
두 을 붙여하기 배경색을 .3 ( #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>
JavaScript 스펫 :
.1 수를만만 만만만다다
getElementById를 를 가져와합니다.2. getElementByID: BODY ID: ID: BODY ID: ID 。
'합니다.3 . JS의 'setAttribute'는 BODY의 ID입니다.
<script>
function jsOn() {
var chgID = document.getElementById('jsDis');
chgID.setAttribute('id', 'jsEn');
}
</script>
HTML 분부
에 #.1 요소 속성의 을 #jsDis ID는 #jsDis입니다.
2. 함수 .2. onLoad 이벤트를 합니다.onLoad 이벤트에는 붙입니다 jsOn (jsOn())
<body id="jsDis" onLoad="jsOn()">
BODY "#jsDis" ID:
이 자동으로 됩니다.- Javascript는 BODY 태그의 속성을 변경합니다.
'content:'가 표시됩니다.- Javascript는 css 'content:' 규칙 텍스트를 합니다.
하거나 JSwrapper를 의 DIV를 할 수 .
이게 아이디어를 얻는 데 도움이 되길 바랍니다.
★★★★★★★★★★★★★★★★★?JavaScript?그것은 불가능할 것이다.할 수 각에는 특별한 매우 을.각 페이지에는 특별한 자원(아마도 매우 작음)을 요구하는 JavaScript가 있습니다.gif 원하는 요청의 수 .그러면 고유한 페이지 요청과 추적 파일 요청 간의 차이를 파악할 수 있습니다.
언급URL : https://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled
'programing' 카테고리의 다른 글
| PHP 5.4.0 이전 버전에서 익명 함수로 "$this" 사용 (0) | 2022.11.23 |
|---|---|
| MYSQL에서 outfile "access denied"로 변환 - 그러나 내 사용자는 "ALL"로 액세스할 수 있습니다.그리고 폴더는 CHMOD 777 입니다. (0) | 2022.11.23 |
| Laravel JSON Where Clauses with MariaDB 10.2.16 LongText 열을 사용할 수 있습니까? (0) | 2022.11.23 |
| django.db.db.ss.Operation Error: (1071, '지정된 키가 너무 깁니다. 최대 키 길이는 767바이트입니다') (0) | 2022.11.23 |
| Shiro vs.스프링 보안 (0) | 2022.11.03 |