JavaScriptが有効になっている場合、Webページに異なるリンクを生成するにはどうすればよいですか？

Question

私は目立たないJavaScript/graceful劣化のtecnhiqueに従おうとしています。 JavaScriptがオンになっているときとJavaScriptがオフになっているときに、異なるリンクのページを提供したい例えば

JavaScriptのではJavaScriptを

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

（またはそのような何か）になっている場合、リンクが

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

こととなりオフになっています。

JavaScriptとJavaScriptの両方のバージョンのリンクがサーバーサイドスクリプトにつながりますが、パラメータは異なります。 JavaScriptをオフにしたときに呼び出されるバージョンはサーバー上でより多くの処理を実行するため、JavaScriptを検出することは非生産的です（非JavaScriptのサーバースクリプトから他のバージョンにwindow.location経由でリダイレクトするなど）。

注：私はjQueryのようなJavaScriptライブラリ/フレームワークを使用せずにソリューションを好むだろう。

Answer 1

まあ、答えは非Javascriptのリンクを持つ通常のように、ページをレンダリングすることです。それからJS = 1バージョンのリンクをJavascriptで置き換えてください。

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

Answer 2

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 3

あなただけの1つのリンクをやっている場合は、これは十分なはずです：

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

Answer 4

既存のクエリ文字列がないリンクをインテリジェントに処理する簡単なソリューションです。

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

私のサイトでは、完全に非ジャバスクリプト版のサイトを開発しています。私はDjangoで開発し、そのページのデータをDjangoのテンプレート変数として渡します。私はタグのページをレンダリングし、私は変数をJSONifyし、javascriptをレンダリングします。

はたとえば、ここに私のサイト上でのMapViewのための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>