Comment générer différents liens sur la page web si JavaScript est activé?

Question

Je suis en train de suivre tecnhique de JavaScript discret / dégradé. Je voudrais servir avec différents liens lorsque JavaScript est activé, et lorsque JavaScript est désactivé.

Par exemple, lorsque JavaScript est désactivé le lien serait

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

et quand JavaScript est activé

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

(ou quelque chose comme ça).

Les deux versions (avec JavaScript et sans JavaScript) de plomb de lien vers script côté serveur, mais avec des paramètres différents. La version qui est censée être appelée lorsque JavaScript est désactivé effectue plus sur le serveur, donc il serait improductif de détecter JavaScript il (par exemple la redirection de script serveur pour non JavaScript à l'autre version via window.location).

Remarque:. Je préférerais solution sans utiliser les bibliothèques / frameworks JavaScript comme jQuery

Answer 1

Eh bien, la réponse est de rendre la page normale avec les liens non-Javascript. Ensuite, obtenir le Javascript pour remplacer les liens avec les versions JS = 1.

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

Answer 2

Commencez par le lien activé non-Javascript, puis il suffit d'utiliser un code JavaScript pour modifier le lien vers sa valeur Javascript activé. Cela garantit que le lien sera toujours la version correcte. Par exemple:

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

Answer 3

Une solution simple qui gère intelligemment les liens sans querystring existant.

// 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';
}

Answer 4

Si vous faites juste un lien, cela devrait être suffisant:

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

Answer 5

Sur mon site, je développe une version totalement non-javascript du site. Je développe dans Django et transmettre les données de la page en tant que variables de modèle Django. Je rends une page dans une balise, puis je JSONify les variables et de rendre le javascript.

Par exemple, voici le modèle Django pour un MapView sur mon site:

{% 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 %}

Et voici le modèle noscript qui obtient utilisé. C'est ce que les gens sans JS et les moteurs de recherche utilisent:

{% 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>