Как создать разные ссылки на веб-странице, если включен JavaScript?

Я пытаюсь следовать технике ненавязчивого JavaScript/грациозной деградации. Я хотел бы обслуживать страницу с разными ссылками, когда JavaScript включен и когда JavaScript отключен.

Например, когда JavaScript отключен, ссылка будет

<a href="script.cgi?a=action">

и когда JavaScript включен

<a href="script.cgi?a=action;js=1">

(или что-то вроде того).

Обе версии (с JavaScript и без JavaScript) ссылки ведут на серверный скрипт, но с разными параметрами. Версия, которая должна вызываться при выключенном JavaScript, больше работает на сервере, поэтому было бы непродуктивно обнаруживать там JavaScript (например, перенаправление с серверного скрипта для не-JavaScript на другую версию через window.location).

Примечание. Я бы предпочел решение без использования библиотек/фреймворков JavaScript, таких как jQuery.


person Jakub Narębski    schedule 22.07.2009    source источник
comment
Мне не нравится хрупкость предположения, что параметр строки запроса действия всегда будет там. Почему бы не использовать отдельный параметр, например, js=1?   -  person D'Arcy Rittich    schedule 23.07.2009
comment
Строка запроса в первом примере имеет параметр a со значением действия, пример раздела имеет то же самое, но добавляет параметр js со значением 1. (Обратите внимание, что ; и & взаимозаменяемы во всех хороших библиотеках обработки строк запроса) .   -  person Quentin    schedule 23.07.2009
comment
Если вы следуете изящной деградации, вам не следует пытаться сообщить серверу, доступен JS или нет. Это должно обрабатываться внутри страницы, и серверу не нужно об этом заботиться. icant.co.uk/articles/pragmatic-progressive-enhancement — это хороший гид.   -  person Quentin    schedule 23.07.2009
comment
@David Dorward: это может работать для простых статических (не сгенерированных) страниц. Однако в моем случае это выбор между выполнением всей работы на сервере (случай A) и выполнением некоторой работы на клиенте с помощью JavaScript (и AJAX) и сервером, выполняющим различную работу (случай B).   -  person Jakub Narębski    schedule 23.07.2009


Ответы (5)


Что ж, ответ заключается в том, чтобы отображать страницу как обычно со ссылками, отличными от JavaScript. Затем получите Javascript, чтобы заменить ссылки версиями JS=1.

var links = document.getElementsByTagName('a');
for (var i=0;i<links.length;i++) {
    links[i].href += ";js=1";
}
person Daniel Roseman    schedule 22.07.2009

Начните со ссылки без поддержки Javascript, а затем просто используйте некоторый код Javascript, чтобы изменить ссылку на ее значение с поддержкой Javascript. Это гарантирует, что ссылка всегда будет правильной версией. Например:

<a id="link_to_change" href="script.cgi?a=action">

<script type="text/javascript">
    window.onload = function(){
        document.getElementById("link_to_change").href += ";js=1";
    }
</script>
person Eli Courtwright    schedule 22.07.2009
comment
Пока они не нажмут на ссылку до того, как сработает загрузка - person Greg; 23.07.2009

Простое решение, которое разумно обрабатывает ссылки без существующей строки запроса.

// Get array of all links
var links = document.getElementsByTagName('a');

for (var i=0; i<links.length; i++){
    // Add a question mark if link does not already have a querystring.
    links[i].href += (/\?/.test(links[i].href)) ? '' : '?';
    links[i].href += ';js=1';
}
person Triptych    schedule 22.07.2009

Если вы делаете только одну ссылку, этого должно быть достаточно:

<a href="script.cgi?a=action" onclick="this.href += ';js=1';">
person Greg    schedule 22.07.2009

На своем сайте я разрабатываю версию сайта, полностью не поддерживающую JavaScript. Я разрабатываю в Django и передаю данные для страницы в виде переменных шаблона Django. Я визуализирую страницу в теге, а затем JSONify переменные и визуализирую javascript.

Например, вот шаблон Django для отображения карты на моем сайте:

{% extends "new-base.html" %} {% load markup %} {% load tb_tags %}

{% block headcontent %}
  <script type="text/javascript">
    var mapData = {{map|jsonify}};
  </script> 
{% endblock %}


{% block content %}
  {% include "noscript/mapview.html" %}
{% endblock %}

И вот шаблон noscript, который используется. Вот что используют люди без JS и поисковых систем:

{% load tb_tags %}
<noscript>
  <link rel="stylesheet" type="text/css" href="/site_media/css/no-js.css"> 
  <style type="text/css"> div.content { padding:10px } </style>
  <div class=JSWhite>
    <h1 class=noJS>
      {% ifequal map.target.id map.places.0.node.id %}
        <a href="{{map.places.0.pages.0.url}}">{{map.target.name}}</a></h1>
      {% else %}
        <a href="{{map.target.url}}">{{map.target.name}}</a></h1>
      {% endifequal %}
    {% ifequal map.target.type 'node' %}
      &nbsp;- {{map.target.ele}} meters <BR>
    {% endifequal %}
    <span style ='color:gray; font-size:.8em; font-style:italic'>
      ({{map.target.la}},{{map.target.lo}})&nbsp;
    </span>
    <a class=JSAd target=_blank href=http://www.mytopo.com/searchgeo.cfm?lat={{map.target.la}}&lon={{map.target.lo}}&pid=trailbehind>Buy Topo Map</a> &nbsp;-&nbsp;
    <a style='font-size:.8em;color:#CC5500' target=_blank href='http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q={{map.target.name}}'>Get Directions</a>
    {% if map.target.dist %}
      <BR>{{map.target.dist}}
    {% endif %}
    {% if map.target.ascent %}
      <BR>{{map.target.ascent}}
    {% endif %}

    {% for r in map.places %}
      {% ifequal r.node.id map.target.id %} 
        <BR>
        {% if r.pages.0 %}
          {{r.pages.0.summary}}
        {% endif %}
        <UL style='list-style:none;margin-left:0; padding-left:0'>
          {% for key in r.pages %}
            {% ifnotequal forloop.counter 1 %}
              <LI><a href={{key.url}}>{{key.title}}</a><BR>
                  {{key.snippet}}
              </LI>
            {% endifnotequal %}
          {% endfor %}
        </UL>
     {% endifequal %}
   {% endfor %}
   <HR>
   <strong>(<a href="{{map.target.url}}">All</a> -
     <a href="{{map.target.url}}hiking/">Hiking</a> -
     <a href="{{map.target.url}}camping/">Camping</a> - 
     <a href="{{map.target.url}}climbing/">Climbing</a> - 
     <a href="{{map.target.url}}biking/">Biking</a>)</strong><BR>
  <p>
  {% if map.places %}
    <h1>Nearby Adventures</h1>
    <UL style='list-style:none;margin:0; margin-top:10px;padding-left:0'>
      {% for r in map.places %}
        {% ifnotequal r.node.id map.target.id %} 
          <LI><h1>
      {% if r.node.trip_id %}
        <a href="{{r.node.url}}">{{r.pages.0.title}}</a></h1>
      {% else %}
       <a href="{{r.node.url}}{{activity}}">{{r.pages.0.title}}</a></h1>
          {% endif %}
      {% if r.pages.0 %}
            {% if r.pages.0.activity %}
          <strong>{{r.pages.0.activity}}</strong> -
            {% endif %}
            {{r.pages.0.snippet}}
     {% endif %}
   {% endifnotequal %}
     {% endfor %}
   {% endif %}
   </UL>
   </p>
  </div>
</noscript>
person Andrew Johnson    schedule 22.07.2009