Есть ли HTML-код напротив?

Question

Есть ли HTML-код напротив?

есть ли тег в HTML, который будет отображать только его содержимое, если включен JavaScript? Я знаю <noscript> работает наоборот, отображая его содержимое HTML, когда JavaScript выключен. Но я хотел бы только отображать форму на сайте, если JavaScript доступен, рассказывая им, почему они не могут использовать форму, если у них ее нет.

единственный способ, которым я знаю, как это сделать, это с document.write(); метод в теге скрипта, и это кажется немного грязным для больших объемов ФОРМАТ HTML.

432 11

javascript html noscript

11 ответов:

Comments

Ничего не найдено.

ceejayoz · Accepted Answer · 2008-08-27 17:46:09

У вас может быть невидимый div, который отображается через JavaScript при загрузке страницы.

Will · Accepted Answer · 2009-01-10 21:06:51

самый простой способ, который я могу придумать:
<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
нет документа.пишите, никаких скриптов, чистый CSS.

alexanderpas · Accepted Answer · 2017-10-08 04:28:46

прежде всего, всегда разделяйте контент, разметку и поведение!

Теперь, если вы используете библиотеку jQuery (вы действительно должны, это делает JavaScript намного проще), следующий код должен сделать:
$(document).ready(function() {
    $("body").addClass("js");
});
Это даст вам дополнительный класс на теле, когда JS включен. Сейчас, в CSS, вы можете скрыть этот район, когда в классе JS не доступен, и показать на площади, когда JS-это доступно.

кроме того, вы можете добавить no-js как по умолчанию класс к тегу вашего тела, и используйте этот код:
$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});
помните, что он по-прежнему отображается, если CSS отключен.

Chris Bloom · Accepted Answer · 2010-08-24 16:26:13

Я действительно не согласен со всеми ответами здесь о внедрении HTML заранее и скрытии его с помощью CSS, пока он снова не будет показан с помощью JS. Даже без включенного JavaScript этот узел все еще существует в DOM. Правда, большинство браузеров (даже браузеры доступности) будут игнорировать его, но он все еще существует, и могут быть странные времена, когда это возвращается, чтобы укусить вас.

мой предпочтительный метод будет использовать jQuery для создания контента. Если будет много контента, то вы можете сохранить его как фрагмент HTML (только HTML, который вы хотите показать, и ни один из html, тела, головы и т. д. теги) затем используйте функции ajax jQuery, чтобы загрузить его на всю страницу.

Spycho · Accepted Answer · 2011-06-03 14:32:46

у меня есть простое и гибкое решение, несколько похожее на Уилла (но с дополнительным преимуществом быть действительным html):

дайте элементу body класс "jsOff". Удалите (или замените) это с помощью JavaScript. Есть CSS, чтобы скрыть любые элементы с классом " jsOnly "с родительским элементом с классом"jsOff".

это означает, что если JavaScript включен, то класс "jsOff" будет удален из тела. Это будет означать, что элементы с классом "jsOnly" будут не иметь родителя с классом "jsOff" и поэтому не будет соответствовать селектору CSS, который скрывает их, таким образом, они будут показаны.

если JavaScript отключен, то класс "jsOff"не будет быть удалены из организма. Элементы с "jsOnly"будет есть родитель с "jsOff" и так будет соответствует селектору CSS, который скрывает их, таким образом, они будут скрыты.

вот код:
<html>
    <head>
        
        <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. Все очень просто. Он гибкий.

просто добавьте класс "jsOnly" к любому элементу, который вы хотите отображать только при включении JS.

обратите внимание, что JavaScript, который удаляет класс "jsOff", должен быть выполнен как можно раньше внутри тега body. Он не может быть выполнен ранее, так как тег body еще не будет там. Это не должно выполняться позже, так как это будет означать, что элементы с классом "jsOnly" могут быть не видны сразу (поскольку они будут соответствовать селектору CSS, который скрывает их до тех пор, пока класс" jsOff " не будет удален из элемента body).

Это также может обеспечить механизм для JS-только стиль (например .jsOn .someClass{}) и нет-JS-только стиль (например .jsOff .someOtherClass{}). Вы можете использовать его, чтобы обеспечить альтернативу <noscript>:
.jsOn .noJsOnly{
    display:none;
}

TheSmurf · Accepted Answer · 2008-08-27 17:58:41

вы также можете использовать Javascript для загрузки содержимого из другого исходного файла и вывода его. Это может быть немного больше черного ящика, чем вы ищете.

prgDevelop · Accepted Answer · 2013-07-31 08:54:52

мое решение

.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>

Ross · Accepted Answer · 2008-08-27 17:47:04

Алекс приходит на ум здесь, однако это применимо только если вы используете ASP.NET - он может быть эмулирован в JavaScript, однако, но опять же вам придется использовать документ.напишите ();

score 0 · Accepted Answer · 2008-08-27 17:57:44

вы можете установить видимость абзаца / div в "скрытый".

затем в функции "onload" вы можете установить видимость на "видимый".

что-то типа:

этот текст будет скрыт, если не доступен javascript.

cpm · Accepted Answer · 2008-08-30 00:18:59

для этого нет тега. Вам нужно будет использовать javascript, чтобы показать текст.

некоторые люди уже предложили использовать JS для динамической установки CSS visible. Вы также можете динамически генерировать текст с помощью document.getElementById(id).innerHTML = "My Content" или динамически создавать узлы, но CSS hack, вероятно, самый простой для чтения.

Shadow2531 · Accepted Answer · 2008-09-01 14:32:46

вот пример для скрытого способа 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, но вы получите идею.)