тег noscript, мне нужно представить альтернативный HTML, если не включен

Question

Можно ли заменить 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 (обратите внимание, что их 3 сложены друг над другом) - я хочу, чтобы это не происходило, поскольку 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&#8217;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 &amp; Tourism: Hospitality &amp; Events Management"><img src="http://site.com/images/uploads/images/hospitality_event_planning.jpg" alt="Travel &amp; Tourism: Hospitality &amp; Events Management" /></a>
    <strong>Travel &amp; Tourism: Hospitality &amp; 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 &amp; Tourism: Hospitality &amp; Events Management">Learn more</a></p>
</div>

<div>
    <a href="http://site.com/academics/majors/fashion_buying_merchandising/" title="Fashion Buying &amp; Merchandising"><img src="http://site.com/images/uploads/images/fashion_merchandising.jpg" alt="Fashion Buying &amp; Merchandising" /></a>
    <strong>Fashion Buying &amp; 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 &amp; 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;
}

Answer 1

Альтернативой использованию <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>

Престижность John Resig за трюк <script type="text/html"> для ненавязчивого скрытия HTML-шаблонов внутри HTML. Браузеры, по-видимому, не выполняют и не отображают <script> содержимое нетрадиционного типа.

Answer 2

По аналогии с решением Ates , вы можете использовать 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>

Answer 3

Он будет запускать сценарии, если они включены. Если вы хотите настроить поведение