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

サブウインドウの弊害

JavaScriptを使うと、サイズの小さなウインドウなど「サブウインドウ」を開くことができます。 便利な機能ですが、以下のような問題点もあります。

• JavaScript機能が利用できない環境では、リンク先を閲覧できない
• 別のタブや、別のウインドウで表示させたいと思ってもできない
• ステータスバーにリンク先URLが表示されない

……といった問題があります。
今回は、これらの問題をすべて解決したサブウインドウの開き方をご紹介致しましょう。

問題のあるサブウインドウの例

次のサブウインドウの開き方は、よく使われる方法ですが、その下に示すような問題があります。

■例１：

ソース：

<a href="javascript:void(0)" onClick="window.open('abc.htm','subwin','width=300,height=300');">サブウインドウ1</a>  

問題点：

• リンク先がどこなのか、クリックするまで分からない。
  ※リンクの上にマウスを乗せても、リンク先URLはステータスバーには表示されません。
• 別タブや別ウインドウで開けない。
  ※リンクを右クリックして「新しいウインドウで開く」や「新しいタブで開く」を選択しても、エラーページや白紙ページ（ブラウザによって異なります）が開くだけです。
• JavaScriptがOFFならリンク先を閲覧できない。

■例２：

ソース：

<form>
<input type="button" value="サブウインドウ2" onClick="window.open('abc.htm','subwin','width=300,height=300');">
</form>

問題点：

• リンク先がどこなのか、クリックするまで分からない。
  ※ボタンをクリックしたときの動作は、クリックするまで分かりませんね。
• 別タブや別ウインドウで開けない。
  ※ボタンのリンク先を、別のタブや別のウインドウで開く方法はありません。
• JavaScriptがOFFならリンク先を閲覧できない。

解決するには？

それでは、これらの問題をすべて、きれいさっぱり解決してみましょう。

それでは、次のページへ！ →