javascript - JavaScript が有効になっている場合、Web ページにさまざまなリンクを生成する方法は?

Question

私は目立たないJavaScript /グレースフルデグラデーションの技術に従おうとしています。JavaScript がオンの場合とオフの場合で異なるリンクを含むページを提供したいと考えています。

たとえば、JavaScript がオフになっている場合、リンクは次のようになります。

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

JavaScriptがオンになっている場合

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

（またはそのようなもの）。

リンクの両方のバージョン (JavaScript を使用する場合と使用しない場合) は、サーバー側スクリプトにつながりますが、パラメーターが異なります。JavaScript がオフになっているときに呼び出されることになっているバージョンは、サーバー上でより多くのパフォーマンスを発揮するため、そこで JavaScript を検出するのは非生産的です (たとえば、非 JavaScript のサーバー スクリプトから を介して他のバージョンにリダイレクトするwindow.location)。

注: jQuery などの JavaScript ライブラリ/フレームワークを使用しないソリューションを希望します。

Answer 1

答えは、Javascript 以外のリンクを使用してページを通常どおりにレンダリングすることです。次に、JavaScript を取得して、リンクを JS=1 バージョンに置き換えます。

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

Answer 2

既存のクエリ文字列を持たないリンクをインテリジェントに処理するシンプルなソリューション。

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

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>

Answer 4

On my site, I develop a totally non-javascript version of the site. I develop in Django and pass down the data for the page as Django template variables. I render a page in a tag, and then I JSONify the variables and render the javascript.

For example, here's the Django template for a mapview on my 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 %}

And here's the the noscript template that gets used. This is what people without JS and search engines use:

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

Answer 5

リンクを 1 つだけ作成する場合は、次のようにすれば十分です。

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