JavaScript가 활성화 된 경우에만 콘텐츠를 표시하는 HTML에 태그가 있습니까? <noscript>JavaScript가 꺼져있을 때 HTML 콘텐츠를 표시하는 반대 방식으로 작동한다는 것을 알고 있습니다. 그러나 JavaScript를 사용할 수있는 경우에만 사이트에 양식을 표시하여 양식이없는 경우 양식을 사용할 수없는 이유를 설명하고 싶습니다.
이 작업을 수행하는 방법을 아는 유일한 방법 document.write();은 스크립트 태그 의 메서드를 사용하는 것이며 많은 양의 HTML에 대해 약간 지저분하게 보입니다.
답변:
내가 생각할 수있는 가장 쉬운 방법 :
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
document.write, 스크립트, 순수한 CSS가 없습니다.
display: none !important스크립트가 활성화되었을 때 사용하기위한보다 구체적인 규칙 (예 : id 또는 css 선택자)에 의해 재정의되는 것을 방지하기 위해 를 사용하는 것이 좋습니다 .
<noscript>환경 설정에서 자바 스크립트를 비활성화 한 후 페이지를 처음 새로 고침 할 때 태그를 구문 분석하지 않습니다 . 작동하려면 재 장전을 두 번 눌러야합니다.
HTML을 미리 포함하고 JS로 다시 표시 될 때까지 CSS로 숨기는 것에 대한 여기의 모든 답변에 실제로 동의하지 않습니다. JavaScript가 활성화되지 않은 경우에도 해당 노드는 DOM에 여전히 존재합니다. 사실, 대부분의 브라우저 (접근성 브라우저 포함)는이를 무시하지만 여전히 존재하며 그것이 당신을 물기 위해 돌아 오는 이상한 시간이있을 수 있습니다.
내가 선호하는 방법은 jQuery를 사용하여 콘텐츠를 생성하는 것입니다. 콘텐츠가 많으면 HTML 조각으로 저장 한 다음 (표시 할 HTML 만 표시하고 html, body, head 등 태그는 없음) jQuery의 ajax 함수를 사용하여로드 할 수 있습니다. 전체 페이지.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.get('_test.html', function(html) {
$('p:first').after(html);
});
});
</script>
</head>
<body>
<p>This is content at the top of the page.</p>
<p>This is content at the bottom of the page.</p>
</body>
</html>
<p>This is from an HTML fragment document</p><p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>
우선, 항상 콘텐츠, 마크 업 및 동작을 분리하십시오!
이제 jQuery 라이브러리를 사용하는 경우 (정말 JavaScript가 훨씬 쉬워집니다) 다음 코드가 수행해야합니다.
$(document).ready(function() {
$("body").addClass("js");
});
JS가 활성화되면 본문에 추가 클래스가 제공됩니다. 이제 CSS에서 JS 클래스를 사용할 수없는 경우 영역을 숨기고 JS를 사용할 수있는 경우 영역을 표시 할 수 있습니다.
또는 no-jsbody 태그에 기본 클래스로 추가 하고 다음 코드를 사용할 수 있습니다.
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
CSS가 비활성화 된 경우에도 여전히 표시됩니다.
간단하고 유연한 솔루션이 있습니다. Will과 다소 비슷하지만 유효한 html이라는 추가 이점이 있습니다.
본문 요소에 "jsOff"클래스를 지정하십시오. 이것을 JavaScript로 제거 (또는 대체)하십시오. 클래스가 "jsOff"인 상위 요소가있는 "jsOnly"클래스가있는 모든 요소를 숨기려면 CSS를 사용하십시오.
즉, JavaScript가 활성화 된 경우 "jsOff"클래스가 본문에서 제거됩니다. 즉, "jsOnly"클래스를 가진 요소는 "jsOff"클래스를 가진 부모를 가지지 않으므로이를 숨기는 CSS 선택기와 일치하지 않으므로 표시됩니다.
JavaScript가 비활성화 된 경우 "jsOff"클래스 는 본문에서 제거 되지 않습니다 . "jsOnly"와 요소 것 "jsOff"와 부모가 그렇게 할 것이다 가죽 그들을, 따라서 그들이 숨겨져있을 것이라는 CSS 셀렉터와 일치합니다.
코드는 다음과 같습니다.
<html>
<head>
<!-- put this in a separate stylesheet -->
<style type="text/css">
.jsOff .jsOnly{
display:none;
}
</style>
</head>
<body class="jsOff">
<script type="text/javascript">
document.body.className = document.body.className.replace('jsOff','jsOn');
</script>
<noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>
<p class="jsOnly">I am only shown if JS is enabled</p>
</body>
</html>
유효한 html입니다. 간단하다. 유연합니다.
JS가 활성화 된 경우에만 표시하려는 요소에 "jsOnly"클래스를 추가하기 만하면됩니다.
"jsOff"클래스를 제거하는 JavaScript는 가능한 빨리 body 태그 내에서 실행되어야합니다. body 태그가 아직 존재하지 않으므로 더 일찍 실행할 수 없습니다. "jsOnly"클래스가있는 요소는 즉시 표시되지 않을 수 있으므로 나중에 실행해서는 안됩니다 (본문 요소에서 "jsOff"클래스가 제거 될 때까지 해당 요소를 숨기는 CSS 선택기와 일치하기 때문입니다).
이것은 또한 js 전용 스타일링 (예 .jsOn .someClass{}:) 및 no-js 전용 스타일링 (예 :)에 대한 메커니즘을 제공 할 수 있습니다 .jsOff .someOtherClass{}. 이를 사용하여 <noscript>다음에 대한 대안을 제공 할 수 있습니다 .
.jsOn .noJsOnly{
display:none;
}
다음은 숨겨진 div 방식의 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*[data-when-js-is-on] {
display: none;
}
</style>
<script>
document.getElementsByTagName("style")[0].textContent = "";
</script>
</head>
<body>
<div data-when-js-is-on>
JS is on.
</div>
</body>
</html>
(불량한 IE를 위해 조정해야 할 수도 있지만 아이디어를 얻었습니다.)
내 솔루션
.css :
.js {
display: none;
}
.js :
$(document).ready(function() {
$(".js").css('display', 'inline');
$(".no-js").css('display', 'none');
});
.html :
<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>
단락 | div의 가시성을 '숨김'으로 설정할 수 있습니다.
그런 다음 'onload'기능에서 가시성을 'visible'로 설정할 수 있습니다.
다음과 같은 것 :
<body onload = "javascript : document.getElementById (rec) .style.visibility = visible"> <p style = "visibility : visible"id = "rec"> JavaScript를 사용할 수없는 경우이 텍스트는 숨겨집니다. </ p>
이 질문을받은 이후 10 년 동안 HTML에 HIDDEN속성 이 추가되었습니다. CSS를 사용하지 않고 직접 요소를 숨길 수 있습니다. CSS 기반 솔루션과 마찬가지로 요소는 스크립트에 의해 숨김 해제되어야합니다.
<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>