자바 스크립트가 사용 가능한 경우에만 html을 숨기기

자바 스크립트를 사용하지 않는 브라우저를 지원하려는 것보다 SEO가 더 많은 것 같습니다. 일부 html로 읽고 기본적으로 훨씬 좋게 표시되는 Javascript/jQuery 코드가 있습니다. 프로세스 중에 html이 실제로 제거됩니다 (jQuery의 .remove() 함수 사용).자바 스크립트가 사용 가능한 경우에만 html을 숨기기

그래서 페이지가로드 될 때 시각적 인 인공물이 나타나지 않도록 html을 숨 깁니다. 하지만 지금은 자바 스크립트가 활성화되어있는 경우에만 그것을 숨기고 싶습니다. 가장 쉬운 방법은 적절한 요소에 display: none CSS 규칙을 추가하는 <head>에 자바 스크립트를 넣는 것입니다.

이 상황을 처리하는 더 좋은 방법이 있습니까?

출처

2011-03-10 at.

JavaScript는 JavaScript가 활성화되어있는 경우에만 작동하므로 JavaScript를 사용하는 방법에 관계없이 JavaScript가 활성화 된 경우에만 항상 작동하므로 테스트 할 필요가 없습니다.

말한 갖는

, 당신은이 HTML5 Boilerplate에서 수행하는 방법을 볼 수 있습니다

<html class="no-js" lang="en"> 
... the rest of the page 
</html>

<html> 태그에 적용되는 no-js 클래스를 사용하여.이 클래스는 나중에 자바 스크립트를 사용하여 제거되고 js 클래스는 당신이 당신의 CSS와 HTML에서 사용할 수있는 둘, 추가됩니다

<p class="js">This is displayed if JavaScript is enabled</p> 
<p class="no-js">This is displayed if JavaScript is disabled</p>

또는 CSS에서

가 : 당신이 Modernizr을

.no-js #someWidget { display: none; } 
.js #someFallback { display: none; }

를 사용하는 경우 그것은 이미 당신을 위해 그 클래스를 변경됩니다,하지만 당신은 다음하지 않더라도 당신이해야 할 같은 것입니다 :

document.documentElement.className = 
    document.documentElement.className.replace(/\bno-js\b/,'js');

그것은 간단하고 우아한 솔루션 모든 y는의가 귀하의 스타일과 마크 업에서 CSS 클래스가 걱정됩니다.

출처

2011-03-10 10:23:48 rsp

본문에 클래스를 설정하는 스크립트를 하나만 사용하면 CSS에서 참조 할 수 있지만 기본적으로 올바른 길을 가고 있습니다.

예컨대 :

<body> 
<script>document.body.className = "jsenabled";</script>

그런 다음 CSS 규칙 : 몸이 클래스가있는 경우

body.jsenabled selector_for_your_initially_hidden_content { 
    display: none; 
}

규칙 만에 시작된다.

전체 예제 :

HTML (인라인 스크립트) :

<body> 
    <script>document.body.className = "jsenabled";</script> 
    <div class='foo'>I'm foo, I'm hidden on load</div> 
    <div>I'm not foo, I'm not hidden on load</div> 
    <div class='foo'>Another foo</div> 
    <div>Another bit not hidden on load.</div> 
</body>

CSS :

body.jsenabled div.foo { 
    display: none; 
}

Live copy 나는 단지 예를 들어, "foo는"클래스를 사용했습니다. 그것은 구조적 선택자와 마찬가지로 쉽게 될 수 있습니다.

출처

2011-03-10 10:17:23

dom이 완전히로드되기 전에 Akaruns 솔루션이 약간의 깜박임을 유발할 수 있으므로 가장 잘 작동합니다. – ullmark

예, 그것은 당신이 가진 "숨겨진 블록"의 양에 달려 있습니다! – Akarun

@Akarun : 그렇게 생각하지 않습니다. 클래스를 body에 추가하면 셀렉터를 사용하여 구조적 선택 자나 숨겨진 내용에 클래스를 추가하여 쉽게 숨길 수 있습니다 (예 : 명확성을 위해). –

숨기려는 각 사업부 (또는 블록)에 클래스 hiddenblock를 추가하고이 헤더에 코드를 JS 추가

$(document).ready(function() { 
    $(body).addClass('jsenable'); 
    $('.hiddenblock').hide(); 
}

또한 마스크 또는 다른 블록을 수정하는 클래스 jsenable을 사용할 수 있습니다 , 이렇게 :

.jsenable #myblock { position: absolute; right: 10000px; }

출처

2011-03-10 10:18:42 Akarun

페이지를로드 할 때 비 자바 스크립트 html을 깜박이지 않습니까? –

나는 noscript html을 사용하여 tag 일을 할 것이라고 생각합니다. 태그는 사용자 브라우저에서 스크립트가 사용 중지 된 경우 콘텐츠를 표시합니다.

출처

2011-03-10 10:19:48 katsuya

자바 스크립트가 사용 가능한 경우에만 html을 숨기기

답변

관련 문제