<noscript>와 반대되는 HTML이 있나요?

StackOverflow https://stackoverflow.com/questions/30319

  •  09-06-2019
  •  | 
  •  

문제

JavaScript가 활성화된 경우에만 콘텐츠를 표시하는 태그가 HTML에 있습니까?알아요 <noscript> 반대 방향으로 작동하여 JavaScript가 꺼지면 HTML 콘텐츠를 표시합니다.하지만 JavaScript를 사용할 수 있는 경우에만 사이트에 양식을 표시하고, JavaScript가 없으면 양식을 사용할 수 없는 이유를 알려주고 싶습니다.

내가 이 작업을 수행하는 방법을 아는 유일한 방법은 document.write(); 메소드를 스크립트 태그에 추가해야 하며 HTML의 양이 많으면 약간 지저분해 보입니다.

도움이 되었습니까?

해결책

페이지가로드 될 때 자바 스크립트를 통해 표시되는 보이지 않는 div가있을 수 있습니다.

다른 팁

내가 생각할 수있는 가장 쉬운 방법 : 라코 디스

문서 작성, 스크립트, 순수한 CSS

나는 HTML을 미리 삽입하고 JS로 다시 표시 될 때까지 CSS로 숨기는 것에 대한 여기의 모든 답변에 실제로 동의하지 않습니다.JavaScript를 사용하지 않아도 해당 노드는 DOM에 여전히 존재합니다.사실, 대부분의 브라우저 (접근성 브라우저 포함)는이를 무시하지만 여전히 존재하며 그것이 다시 당신을 괴롭히는 이상한 시간이있을 수 있습니다.

내가 선호하는 방법은 jQuery를 사용하여 콘텐츠를 생성하는 것입니다.콘텐츠가 많으면 HTML 조각으로 저장 한 다음 (표시 할 HTML 만 표시하고 html, body, head 등 태그는 없음) jQuery의 ajax 함수를 사용하여로드 할 수 있습니다.전체 페이지.

test.html 라코 디스

_test.html 라코 디스

결과 라코 디스

먼저, 항상 콘텐츠, 마크 업 및 행동을 분리하세요!

이제 jQuery 라이브러리를 사용하는 경우 (정말 JavaScript가 훨씬 쉬워집니다) 다음 코드가 수행해야합니다. 라코 디스

JS가 활성화되면 본문에 추가 클래스가 제공됩니다. 이제 CSS에서 JS 클래스를 사용할 수없는 경우 영역을 숨기고 JS를 사용할 수있는 경우 영역을 표시 할 수 있습니다.

또는 body 태그의 기본 클래스로 no-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{}) 및 JS 전용 스타일이 아닌 스타일(예: .jsOff .someOtherClass{}).이를 사용하여 대안을 제공할 수 있습니다. <noscript>:

.jsOn .noJsOnly{
    display:none;
}

Javascript를 사용하여 다른 소스 파일에서 콘텐츠를로드하고 출력 할 수도 있습니다.그것은 당신이 찾고있는 것보다 조금 더 블랙 박스 일 수 있습니다.

다음은 숨겨진 div 방식의 예입니다. 라코 디스

(아마도 열악한 IE를 위해 조정해야 할 수도 있지만 아이디어를 얻었습니다.)

내 솔루션

.css : 라코 디스

.js : 라코 디스

.html : 라코 디스

Alex 's기사 가 여기에서 떠오르지 만 ASP.NET을 사용하는 경우에만 적용 할 수 있습니다. 그러나 JavaScript로 에뮬레이션 할 수는 있지만 document.write (); 를 사용해야합니다.

단락 | div의 가시성을 '숨김'으로 설정할 수 있습니다.

그런 다음 'onload'기능에서 가시성을 'visible'로 설정할 수 있습니다.

예 :

JavaScript를 사용할 수없는 경우이 텍스트는 숨겨집니다.

태그가 없습니다.텍스트를 표시하려면 자바 스크립트를 사용해야합니다.

일부 사람들은 이미 JS를 사용하여 CSS를 동적으로 표시하도록 제안했습니다.document.getElementById(id).innerHTML = "My Content"를 사용하여 동적으로 텍스트를 생성하거나 동적으로 노드를 생성 할 수도 있지만 CSS 해킹은 아마도 가장 읽기 쉬운 방법 일 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top