<noscript>의 반대쪽에있는 HTML 태그가 있습니까? 즉, JavaScript가 활성화 된 경우에만 일부 내용을 표시합니까? 예를 들어 : 물론 <ifscript>의반대쪽 <noscript>
<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>
<ifscript>
실제로 존재하지 않습니다. JavaScript를 사용하여 DOM에 <h1>을 추가하여 동일한 결과를 얻을 수는 있지만 가능한 경우 (X) HTML을 사용하여이 작업을 수행하려는 경우
감사합니다, DONAL
여기에 <script>가 있습니다. 처음에는 CSS를 사용하여 특정 부분을 숨기고 JavaScript를 사용하여 표시합니다. 조금 더 빨리 함량 표시와입니다 jQueryready()의 작은 도움으로
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643</title>
<script>
window.onload = function() {
document.getElementById("foo").style.display = 'block';
};
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
... 나 : 여기에 기본 킥오프 예입니다
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').show();
});
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
사용자 경험을 개선하기를의 <script>을 배치하는 것이 좋습니다 토글 된 특정 HTML 요소 바로 다음을 호출하여 "내용 플래시"또는 "요소 셔플"이 없도록합니다. Andrew Moore는이 주제에 good example을 부여했습니다.
또는 <style>에 <noscript>으로 다른 방법으로 해킹 할 수 있습니다. 이것은 작동
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with CSS in noscript</title>
</head>
<body>
<noscript>
<style>#foo { display: none; }</style>
<p>JavaScript is disabled
</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
방법에 대한
<script>
document.write("<h1>Click on the big fancy Javascript widget below</h1>");
</script>
이것은 특히 OP가 피하기를 원하는 것입니다. 또한, document.write()? 2010 년에? – thepeer
:
<script type="text/javascript">
if (document != undefined)
{
document.write("Woohoo, JavaScript is enabled!");
}
</script>
<noscript>
Sorry mate, we use JavaScript here.
<noscript>
그러나 "완전한"HTML 페이지에 대해 이렇게하려는 경우에는 추악하고 오류가 발생합니다. – BalusC
@BalusC : 왜 "완전한"html 페이지로 만들겠습니까? 문서가 완성 된 후에는 '
내 HTML 페이지에 다음 나는 보통 수행
<html>
<head>
<!-- head tags here -->
</head>
<body class="js-off">
<script type="text/javascript">
// Polyglot! This is valid MooTools and jQuery!
$(document.body).addClass('js-on').removeClass('js-off');
</script>
<!-- Document markup here -->
</body>
</html>
을 다음과 같은 장점이 기술을 한 사용 :
당신은 모두 JavaScript를 지원하는 브라우저와의 직접없는 사람들을 타겟팅 할 수 있습니다 당신의 CSS 파일.
그것은 유효한 XHTML (<noscript>에 <style> 태그 <head>가 잘못에 <noscript> 태그가 잘못되었습니다)입니다.
페이지의 나머지 부분이 렌더링되기 전에 스타일이 먼저 변경됩니다. domReady 전에 화재가 발생하므로 스타일이 깜박 거리지 않습니다.서로 다른 스타일 JS가 활성화 여부에 따라 여부와 위젯이있을 때
그런 식으로, 당신은 CSS 파일에 같은 장소에서 당신의 스타일을 정의 할 수 있습니다.
<style type="text/css">
#jsWarning {
color: red;
}
#jsConfirm {
color: green;
}
body.js-on #jsWarning,
body.js-off #jsConfirm {
display: none;
}
</style>
<div id="jsWarning">This page requires JavaScript to work properly.</div>
<div id="jsConfirm">Congratulations, JavaScript is enabled!</div>
+1이 흥미로운 해결책입니다. – OregonGhost
+1 좋은 "실제"해결책입니다. – BalusC
대기, js-on 및 js-off 클래스는 display : none ...?으로 설정됩니다. 또한 BODY 태그를 보이지 않게 조작하는 경우에도 noscript 메시지가 표시되지 않습니다. –
'onload' 핸들러에 요소를 표시하면 페이지가 리플 로우되어 요소가 움직일 수 있습니다. 요소는 느린 서버에서 큰 이미지를 가져 오는 경우 페이지의 모든 이미지가로드되기 전에는 표시되지 않습니다 .-) jQuery의'ready' 콜백은 작동 할 때이 문제가 없습니다. 문서가 구문 분석 되 자마자 –
예, jQuery 방법 또는 CSS-in-noscript가 더 선호됩니다. – BalusC
jQuery 접근법을 사용한다고해서 jQuery가로드되지 않았거나 (아마도 차단 된) CDN이 다운되거나 사용할 수 없다는 것을 의미하는 반면, YouTube 비디오 및 Facebook 위젯은 계속 정상적으로 작동한다는 의미 일 수 있습니다. . –