JavaScript + Ajax 実践サンプル集

JavaScriptが無効なときも正常に動作させる

説明補足説明コード分割コードコメント投稿

このサンプルは、ドロップダウンリストからサイトを選択して移動することができます。JavaScriptが有効なときは、ドロップダウンリストにサイト名が表示されますので、サイトを選択したら[Go!]ボタンをクリックして移動します。

JavaScriptが無効なときは、ドロップダウンリストの代わりにフラットなリンクを表示します。

検索エンジンのロボット（クローラー）が訪問したときは、JavaScriptを認識しませんのでフラットなリンクが表示されます。これで、サイトのリンクが正常にインデックス化されるようになります。

JavaScriptを無効にした状態でサンプルを実行するには、「このサンプルを編集して試してみる」をクリックして新規ウィンドウを開いてからブラウザのJavaScriptを無効にします。

このサンプルを編集して試してみる | 新着サンプルのメールを受け取る

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

外部スクリプトHEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
window.onload = setEvent;

function setEvent() {
  document.getElementById("btnGo").onclick = goTo; 
  document.getElementById("dropLinks").style.display = "block";
  document.getElementById("flatLinks").style.display = "none";  
}
 
function goTo() {   
  var sel = document.getElementById("Select1")
  var url = sel.options[sel.selectedIndex].value;
  window.location.href = url;
}

このサンプルを編集して試してみる!

検索エンジンのロボットを考慮しないときは、OPTIONタグのvalue属性にURLが設定されているためリンクが正常に認識されません。

<select id="Select1">
  <option value="http://www.google.co.jp/">Google</option>
  <option value="http://www.yahoo.co.jp/">Yahoo!</option>
  <option value="http://www.msn.co.jp/">MSN</option>  
</select>

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

JavaScriptが無効なときも正常に動作させる