新しい window を open するとき、スクリプト無効環境でもリンクを機能させる


javascript を使って、別ウィンドウを開かせるようなリンクを使う場合、ユーザーがスクリプトを無効にしていると、リンクが機能しなくなっていまいます。

これはユーザーが持つ機会を失わせることになります。
制作者にとっても不利益ですが、ページ自体のユーザーに対する公平さを損なうことになり、たいへん問題があります。

スクリプトを無効化しているユーザーに対しては、noscriptタグ を使って有効なリンクを提供する方法が良く用いられますが、これでは機能しないリンクが残されたままになってしまい、問題が残ります。
ここでは一歩踏み込んで、どちらの環境でも同じように表示できる方法を考えてみます。

この下に表示されている google へのリンクが、サンプルになります。
ブラウザの設定を変えてリロードしてみましょう。

google　（キミ　スクリプト無効だな） 
<!-- スクリプトと、スタイルの定義 -->

<script language="JavaScript" type="text/JavaScript">
<!--
function newWin(uri , name){
  window.open(uri , name );
  }
//-->
</script>


<style type="text/css">
.hide {
  display: none;
}
</style>
<!-- HTMLでのコーディング -->

　１  <script type="text/javascript">
　２    document.write("<a href=\"javascript:void(0);\" ");
　３    document.write("onclick=\"newWin('http://www.google.com','newHoge');\">");
　４    document.write("Google　（ワレ　スクリプト有効やな）</a>");
　５    document.write("<div class='hide'>");
　６  </script>
　７	
　８  <a href="http://www.google.com" target="newHoge">google　（キミ　スクリプト無効だな）</a>
　９	
１０  <script type="text/javascript">
１１    document.write('</div>');
１２  </script>

ブラウザでスクリプトが有効になっていると、どのようなHTMLを書き出すのか考えてみましょう。

通常の a href によるリンク（８行目）は、５行目で hideクラスが指定された div要素に挟まれているのが分かると思います。

この div開始タグ と １１行目 の閉じタグは、どちらも scriptタグ で囲まれていますので、スクリプトが有効になっていると、このブロック要素が生成されることになります。

そうすると、通常の a href によるリンク（８行目）は、display;none と定義されたブロック要素の内容物になりますので、ブラウザには表示されませんよね。

実際にどんなHTMLが書き出されるのか見てみましょう。

  <!-- スクリプトが有効のときの、HTMLのイメージ -->
  <a href="javascript:void(0);" onclick="newWin('http://www.google.com','newHoge');">Google　（ワレ　スクリプト有効やな）</a>
  <div class="hide">
    <a href="http://www.google.com" target="newHoge">google　（キミ　スクリプト無効だな）</a>
  </div>

 

では今度は、スクリプトが無効になっているとき、どのようなHTMLが書き出されるか考えてみましょう。

これは簡単ですね。
scriptタグ の中身はすべて無視されますので、書き出されるHTMLはただ 1行だけ。

  <!-- スクリプトが無効のときの、HTMLのイメージ -->  
  <a href="http://www.google.com" target="newHoge">google　（キミ　スクリプト無効だな）</a>

結論として、スクリプトが有効であろうと無効であろうと、リンクが機能するページを書くことが出来ます。