тег noscript, мне нужно представить альтернативный HTML, если он не включен
-
20-08-2019 - |
Вопрос
Можно ли заменить javascript на HTML, если в браузере пользователя не включен JavaScript?
Я знаю, что могу использовать <noscript>this displays in place of javascript</noscript>
Это работает нормально, но JavaScript по-прежнему работает.
Теоретически мне бы хотелось вот этого:
если JavaScript включен
запустить JavaScript
если JavaScript не включен
не запускайте JavaScript и укажите альтернативный метод
Я использую этот плагин jQuery: http://malsup.com/jquery/cycle/int2.html
Когда я отключаю JavaScript в Safari, он отображает все три элемента внутри div.Плагин постепенно исчезает в каждом элементе, но если он отключен, он отображает все три подряд, без постепенного появления и исчезновения, как это происходит с включенным JavaScript.
Если JavaScript отключен, я бы хотел, чтобы он не отображал все три элемента одновременно.Я покажу вам, как он должен выглядеть и что он делает, когда JavaScript отключен.
Отключенный вид: http://i42.tinypic.com/212y1j6.png (обратите внимание, что они расположены друг над другом) — я хочу, чтобы этого не происходило, поскольку JavaScript отключен.
Включенный вид: http://i39.tinypic.com/9gwu3d.png
Вот код div, в котором находятся элементы:
$(document).ready(function() {
$('#featured-programs-left').cycle({
fx: 'fade',
speed: 'slow',
timeout: 15000,
next: '#next2',
prev: '#prev2'
});
});
<div id="featured-programs-left">
<div>
<a href="http://site.com/academics/majors/emergency_medical_technician_-_paramedic/" title="Emergency Medical Technician - Paramedic"><img src="http://site.com/images/uploads/images/emt.jpg" alt="Emergency Medical Technician - Paramedic" /></a>
<strong>Emergency Medical Technician - Paramedic</strong>
<p>This unique A.A.S. degree program, a partnership between College and Faxton-St. Luke’s Healthcare provides the paramedic student the education necessary to function in an</p>
<p><a href="http://site.com/academics/majors/emergency_medical_technician_-_paramedic/" title="Learn more about Emergency Medical Technician - Paramedic">Learn more</a></p>
</div>
<div>
<a href="http://site.com/academics/majors/travel_tourism_hospitality_events_management/" title="Travel & Tourism: Hospitality & Events Management"><img src="http://site.com/images/uploads/images/hospitality_event_planning.jpg" alt="Travel & Tourism: Hospitality & Events Management" /></a>
<strong>Travel & Tourism: Hospitality & Events Management</strong>
<p>This program prepares students for exciting careers in the travel and tourism industry and the hospitality and events planning field. Graduates are prepared to:<br</p>
<p><a href="http://site.com/academics/majors/travel_tourism_hospitality_events_management/" title="Learn more about Travel & Tourism: Hospitality & Events Management">Learn more</a></p>
</div>
<div>
<a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Fashion Buying & Merchandising"><img src="http://site.com/images/uploads/images/fashion_merchandising.jpg" alt="Fashion Buying & Merchandising" /></a>
<strong>Fashion Buying & Merchandising</strong>
<p>This program prepares graduates for careers throughout the Fashion Industry including positions in buying, fashion merchandising, retail and wholesale sales, retail</p>
<p><a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Learn more about Fashion Buying & Merchandising">Learn more</a></p>
</div>
</div>
CSS для div
#featured-programs-left img,
#featured-programs-right img{
xfloat:left;
overflow:auto;
xclear:left;
xwidth:351px;
xpadding:0 5px 5px 0;
border:0;
}
#featured-programs-left,
#featured-programs-right {
height:625px;
float:left;
overflow:auto;
clear:left;
clear:right;
width:100%;
xborder:2px solid red;
}
#featured-programs-left div,
#featured-programs-right div {
xborder:1px solid purple;
overflow:auto;
clear:left;
clear:right;
width:352px;
height:345px;
}
#featured-programs-left {
float:left;
}
Решение
Что-то вроде Решение Атеса, вы можете использовать Javascript для изменения контента для пользователей, у которых он включен.Например, предположим, что у вас есть необычное меню, которое предоставляет пользователям Javascript очень простую навигацию, но бесполезно для пользователей, не использующих JS.В HTML установите для свойства display значение «none», а затем используйте JS, чтобы включить его.В вашем случае, если у вас есть контент, который вы не хотите показывать пользователям, не использующим JS, вы можете просто скрыть его по умолчанию.Обратной стороной является то, что если в браузере отключены JS И CSS, это не сработает.Если вас это беспокоит, вы можете использовать JS для вставки контента.
<html>
<head>
<script>
$(document).ready(function() {
$('.jsok').show();
});
</script>
<style>
.jsok { display: none; }
</style>
</head>
<body>
<div class="jsok"><!-- content for JS users here--></div>
<div><!-- content for everyone here --></div>
<noscript><!-- content for non-js users here --></noscript>
</body>
</html>
Другие советы
Альтернатива использованию <noscript>
заключается в том, чтобы скрыть определенный элемент с помощью JavaScript сразу после загрузки страницы.Если JavaScript отключен, элемент останется отображаемым.Если JavaScript включен, ваш скрипт будет выполнен, а элемент будет скрыт.
window.onload = function () {
document.getElementById("no_script").style.display = "none";
}
<div id="no_script">
You don't have JavaScript enabled.
</div>
Обновлять
Если вы хотите сделать обратное (показать немного HTML при включенном JavaScript), вы всегда можете добавить новые элементы в дерево DOM, используя различные методы.Вот один:
$(document).ready(function() {
$('#container').html($('#content').html());
});
<div id="container"></div>
<script type="text/html" id="content">
<div>Your <em>HTML</em> goes here</div>
</script>
Престижность Джон Ресиг для <script type="text/html">
трюк для ненавязчивого сокрытия HTML-шаблонов внутри HTML.Браузеры, очевидно, не выполняют и не отображают <script>
контент нестандартного типа.
Он будет запускать сценарии, если сценарии включены.Если вы хотите инсценировать поведение <noscript>, отключите JavaScript в своем браузере и попробуйте его.