同じページの特定箇所へリンクする方法は、以前「ページの途中にリンクする」という記事に書きました。しかし、最近試してわかったのですが、同じページ内へのリンクを別窓で開こうとしてもうまくいきません。
今開いているページへリンクを張り、target属性を指定して開こうとしてもうまくいかない
同じページ内に id="link" というパートを作り、そこへリンクさせようと、以下の3パターンを試しましたが、全部「別窓で開く」のに失敗しました。
リンク先へは移動するのですが、別窓が開かず、同じウインドウの中で遷移します。
これは、W3Cの仕様なんでしょうか。簡単にググってみましたが、わかりませんでした。ちなみに実行環境はLinux Mint版 Firefox(16.0.2) と Google Chrome(26.0.1410.63) の２つです。
<a href="#link" target="_new">go link</a>
<a href="#link" target="unique_name">go link</a>
３つ目の target="unique_name" は、「新しいウインドウに自分で好きな名前を付けて開く」という方法です。今回は「unique_name」という名前をつけていますが、名前は自由に決められます。
「リンク先を表示するウィンドウの指定（target）」より引用
<a href="index.html" target="morepage">home</a>
target に自分の好みの自由な名前 を付けて、新しいウインドウを表示させ、そのウィンドウに複数のページのリンク先を切り替わり表示させます。 target の値に「morepage」 と付けて三つのページを同じウィンドウに表示させます。
例：
<a href="index.html" target="morepage">home</a>
<a href=cho3.html" target="morepage">タグ教室</a>
<a href="sitoku.html" target="morepage">知っとくコーナー</a>上の3つのリンク先ページが morepage と名前の付いた 同じ新しいウィンドウの中で切り替わります。最初に選択されたページ（どのページでもいいのですが）には新しいウィンドウで表示されるので、戻るボタンは灰色ですが、次のページからは同じウィンドウに表示されるので戻るボタンは有効になります。
JavaScriptのwindow.openを使えば、同じページも別窓で開ける
当然、JavaScriptが有効でないと使えませんが、window.openで新しい窓を開けます。
window.openの説明は杜甫々さんの「ウィンドウ（Window）」というページが詳しいです。
具体的には下のソースで、新しいウインドウに同じページの id="link" の場所が表示されます。
実際に、次のリンクをクリックすると新しい窓で、下の赤い部分が開きます →「リンクへ」
window.openに入れるURLは、リンク先のidだけで大丈夫です。
window.open('#link')
href="javascript:void(0);" で、リンクを無効にする
aタグはクリックしたらリンク先へ飛ぶものですので、その作用を無効にしないと元のウインドウの画面が、そこへ移動してしまいます。そのために href に、何もしないスクリプトを充てているのがjavascript:void(0);です。
ほとんどの場合、これで問題ありません。しかし、href のリンク先URLを消して、javascript:void(0);を充ててしまったので、JavaScriptが無効だとクリックしてもリンクを表示できません。
それを避けるためにもっとも無難なのは、次の方法です。
- HTMLには、通常のリンクを書いておく。
<a href="#link" onclick="window.open('#link');">リンクへ</a> - それを後から、JavaScriptで書きかえる。
JavaScriptが有効でない場合は、スクリプトが動かないのでリンクが書きかえられません。そうすれば、新しい窓ではなく同じ窓でですが正しくリンク先へ遷移します。
具体的な書きかえ用のJavaScriptは次のようになります。
<script type="text/javascript"><!--
document.querySelector('a[href="#link"]').href = "javascript:void(0);";
// -->
</script>
このスクリプトは、href="#link" である aタグを探して、その href を "javascript:void(0);" に書きかえるという動作をします。
上のソースを実際に書いたのが次のリンクです。リンクをクリックすると動作が確認できます。→ リンク