【ホームページ作成】閲覧者に不便をかけない「サブウインドウ」の開き方

解決するには？

さて、この問題を解決するにはどうすれば良いでしょうか。
実はとっても簡単です。

問題点は3つありましたね。

• リンク先URLがステータスバーに表示されない。
• 別のタブや別のウインドウで開けない。
• JavaScriptがOFFだとリンク先を閲覧できない。

これらの問題は、すべて、（リンクを作る a要素の）href属性にURLが記述されていないことが原因です。

<a href="リンク先URL"> ～～～ </a>

リンク先がどこなのかをステータスバーに表示させるためには、href属性にURLを記述する必要(※)があります。
また、JavaScriptがOFFだった場合でも機能させたり、リンク先を別ウインドウに出せるようにするためにも、やはり href属性にURLを記述する必要があります。

※JavaScriptでステータスバーに任意の文字を書けますから、それを使えばステータスバーにリンク先を表示させることは可能です。 しかし、それでは、JavaScriptがOFFだった場合にリンク先を閲覧できないことに変わりはありません。

ならば、href属性にURLを記述すればよいのです。

href属性にURLを書くと

では、href属性にもリンク先URLを記述するとどうなるでしょうか。

確かに、リンク先URLはステータスバーに表示されるようになります。JavaScriptがOFFでも閲覧できますし、別ウインドウでも開けます。 しかし、 サブウインドウが表示された場合でも、元のウインドウ側もリンク先へ移動してしまいます。

これでは、サブウインドウを開く意味がありませんね。

「return false」を追加する！

そこで、スクリプトの末尾に次の記述を加えます。
これで、何もかも解決です。

return false;

サブウインドウを開くスクリプトは次のような感じですね。

window.open('abc.htm', 'subwin', 'width=300,height=300');

この終わりに、「 return false; 」と付け加えます。

window.open('abc.htm', 'subwin', 'width=300,height=300');
return false;

たったこれだけで、サブウインドウが開いたときには（＝JavaScriptが実行されたときには）href属性で指定したURLへの移動は行われなくなります。

この方法を使えば、

• JavaScriptが有効な状態でリンクがクリックされれば、サブウインドウが開き
• JavaScriptが無効な状態なら、現在のウインドウでリンク先が表示され
• 閲覧者が「別タブ」や「別ウインドウ」に表示させようと操作したときには、（JavaScriptの有効・無効に関係なく）ユーザの意図通り別ウインドウで開く

……ようになります。

■例：

ソース：

<a href="abc.htm" onClick="window.open('abc.htm','subwin','width=300,height=300'); return false;">サブウインドウ3</a>  

問題点はすべて解決しています。

• リンク先がどこなのか、ステータスバーで分かる。
• ユーザが望めば、別タブでも別ウインドウでも開ける。
• JavaScriptがOFFでも、リンク先を閲覧できる。

おわりに

今回は、JavaScriptで作るサブウインドウの問題点を解決する方法をご紹介致しました。とても簡単な上に、ユーザビリティ上も望ましい方法(※)ですから、ぜひ、お試し下さい。

※JavaScriptがOFFでも閲覧できる点や、別ウインドウで開こうとするユーザの操作を妨げない点などが望ましいと言えます。「サブウインドウを使って表示させること」そのものが本当に必要か（便利か）どうかは、しっかり検討する必要はあります。

【関連記事】

• 別窓を開かずに、その場で拡大画像を表示！
• リンクの表示先ウインドウを選択可能にする
• クリックで「折りたためる」ボックスを作る
• 別ウインドウで開くリンクにアイコンを付加
• ダウンロードと同時に案内ページを表示する