Czy istnieje HTML przeciwny do?
Czy istnieje znacznik w HTML, który wyświetli jego zawartość tylko wtedy, gdy JavaScript jest włączony? Wiem, że <noscript> działa odwrotnie, wyświetlając jego zawartość HTML, gdy wyłączony jest JavaScript. Ale chciałbym tylko wyświetlać formularz na stronie, jeśli JavaScript jest dostępny, mówiąc im, dlaczego nie mogą korzystać z formularza, jeśli go nie mają.
Jedyny sposób, w jaki wiem, jak to zrobić, to metoda document.write(); w znaczniku skryptowym, i wydaje się to trochę niechlujne dla dużych ilości HTML.
11 answers
Możesz mieć niewidoczny div, który jest wyświetlany przez JavaScript podczas ładowania strony.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-27 14:46:09
Najprostszy sposób, jaki mogę wymyślić:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
Brak dokumentu.pisz, żadnych skryptów, czysty CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-10 19:06:51
Po pierwsze, zawsze oddzielne treści, znaczniki i zachowanie!
Teraz, jeśli używasz biblioteki jQuery (naprawdę powinieneś, to sprawia, że JavaScript jest o wiele łatwiejszy), następujący kod powinien zrobić:
$(document).ready(function() {
$("body").addClass("js");
});
To da ci dodatkową klasę na ciele, gdy JS jest włączony. Teraz, w CSS, możesz ukryć obszar, gdy Klasa JS nie jest dostępna, i pokazać obszar, gdy JS jest dostępna.
Alternatywnie możesz dodać no-js jako domyślną klasę do tagu body i użyć ten kod:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
Pamiętaj, że nadal jest wyświetlany, jeśli CSS jest wyłączony.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-08 01:28:46
Naprawdę nie zgadzam się ze wszystkimi odpowiedziami tutaj na temat osadzania HTML wcześniej i ukrywania go za pomocą CSS, dopóki nie zostanie ponownie pokazany z JS. Nawet bez włączonej obsługi JavaScript, ten węzeł nadal istnieje w DOM. To prawda, że większość przeglądarek (nawet przeglądarek dostępności) zignoruje go, ale nadal istnieje i mogą być dziwne czasy, kiedy to wraca, aby cię ugryźć.
Moją preferowaną metodą byłoby użycie jQuery do generowania zawartości. Jeśli będzie to dużo treści, możesz zapisać go jako Fragment HTML (tylko HTML, który chcesz pokazać i żaden z html, body, head, itp. tags) następnie użyj funkcji ajax jQuery, aby załadować go na całą stronę.
Test.html
<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>
_test.html
<p>This is from an HTML fragment document</p>
Wynik
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-08-24 13:26:13
Mam proste i elastyczne rozwiązanie, nieco podobne do Will ' a (ale z dodatkową korzyścią bycia poprawnym html):
Nadaj elementowi ciała klasę "jsOff". Usuń (lub zamień) to na JavaScript. Mieć CSS, aby ukryć wszelkie elementy z klasą "jsOnly" z elementem nadrzędnym z klasą "jsOff".
Oznacza to, że jeśli JavaScript jest włączony, Klasa "jsOff" zostanie usunięta z ciała. Oznacza to, że elementy z klasą "jsOnly" nie będą miały rodzica z klasą "jsOff" i tak nie będzie pasować do selektora CSS, który je ukrywa, więc zostaną pokazane.
Jeśli JavaScript jest wyłączony, Klasa" jsOff " nie zostanie usunięta z ciała. Elementy z "jsOnly "będą miały rodzica z "jsOff", więc będą pasowały do selektora CSS, który je ukrywa, a więc będą ukryte.
Oto kod:
<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>
To poprawny html. To proste. Jest elastyczny.
Wystarczy dodać klasę "jsOnly" do każdy element, który chcesz wyświetlać tylko wtedy, gdy JS jest włączony.
Należy pamiętać, że JavaScript, który usuwa klasę "jsOff"powinien zostać uruchomiony jak najwcześniej wewnątrz tagu body. Nie można go wykonać wcześniej, ponieważ znacznik body jeszcze tam nie będzie. Nie powinno to być wykonane później, ponieważ oznacza to, że elementy z klasą "jsOnly" mogą nie być widoczne od razu (ponieważ będą pasowały do selektora CSS, który je ukrywa, dopóki Klasa "jsOff" nie zostanie usunięta z ciała element).
Może to również zapewnić mechanizm stylizacji tylko js (np. .jsOn .someClass{}) i no-js-only (np. .jsOff .someOtherClass{}). Możesz użyć go, aby zapewnić alternatywę dla <noscript>:
.jsOn .noJsOnly{
display:none;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-03 11:32:46
Możesz również użyć Javascript do załadowania zawartości z innego pliku źródłowego i wypisania jej. To może być nieco bardziej czarna skrzynka,niż szukasz.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-27 14:58:41
Moje rozwiązanie
.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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-31 05:54:52
Artykuł Alex nasuwa się tutaj na myśl, jednak ma zastosowanie tylko wtedy, gdy używasz ASP.NET - to może być emulowane w JavaScript jednak, ale znowu trzeba użyć dokumentu.write ();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-27 14:47:04
Możesz ustawić widoczność akapitu / div na "ukryty".
Następnie w funkcji 'onload' można ustawić widoczność na 'visible'.
Coś w stylu:
Ten tekst ma być ukryty, chyba że javascript jest dostępny.
Nie ma na to metki. Musisz użyć javascript, aby pokazać tekst.
Niektórzy już sugerowali używanie JS do dynamicznego ustawiania CSS visible. Możesz również dynamicznie generować tekst za pomocą document.getElementById(id).innerHTML = "My Content" lub dynamicznie tworzyć węzły, ale hack CSS jest prawdopodobnie najprostszy do odczytania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-29 21:18:59
Oto przykład ukrytego sposobu 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>
(prawdopodobnie musiałbyś to poprawić dla biednego IE, ale masz pomysł.)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-01 11:32:46