Wie verschiedene Links auf Web-Seite zu generieren, wenn JavaScript aktiviert ist?

Question

Ich versuche tecnhique von unaufdringlich JavaScript / Graceful Degradation zu folgen. Ich möchte Seite mit verschiedenen Links dienen, wenn JavaScript aktiviert ist, und wenn JavaScript deaktiviert.

Zum Beispiel, wenn JavaScript ist die Verbindung wäre ausgeschaltet

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

und wenn JavaScript eingeschaltet

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

(oder so ähnlich).

Beiden Versionen (mit JavaScript und ohne JavaScript) den Link führt zu Server-Seite Skript, aber mit unterschiedlichen Parametern. Die Version, die gemeint ist, aufgerufen wird, wenn JavaScript deaktiviert ist mehr auf dem Server durchführt, daher wäre es unproduktiv JavaScript dort zu erfassen (zum Beispiel von Server-Skript für Nicht-JavaScript auf die andere Version über window.location Umleitung).

. Hinweis: Ich würde es vorziehen Lösung ohne JavaScript-Bibliotheken / Frameworks wie jQuery mit

Answer 1

Nun, die Antwort ist, die Seite als normal mit den nicht-Javascript-Links zu machen. Dann nutzen Sie die Javascript die Links mit den JS = 1 Versionen zu ersetzen.

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

Answer 2

Beginnen Sie mit der nicht-Javascript-fähigen Verbindung, dann verwenden Sie einfach einig Javascript-Code den Link zu seinem Javascript-fähigen Wert zu ändern. Dadurch wird sichergestellt, dass der Link wird immer die richtige Version sein. Zum Beispiel:

<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

Eine einfache Lösung, die auf intelligente Verbindungen ohne bestehenden Abfragezeichenfolgeflag behandelt.

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

Wenn Sie nur einen Link zu tun, sollte dies ausreichen, um:

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

Answer 5

Auf meiner Seite entwickle ich eine völlig nicht-JavaScript-Version der Website. Ich in Django entwickeln und die Daten für die Seite als Django Template-Variablen überliefert. Ich mache eine Seite in einem Tag, und dann JSONify ich die Variablen und die JavaScript machen.

Zum Beispiel, hier ist die Django-Vorlage für eine mapview auf meiner Website:

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

Und hier ist das die NoScript-Vorlage, die verwendet wird. Das ist, was die Menschen ohne JS und Suchmaschinen verwenden:

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