web技術メモ

別窓でリンク先のページをポップアップで開きたいとき

よくリンク設定で、「target=”_blank”」を入れて別タブで開くようにすることは多いですが・・・。

今回、たまたまポップアップでリンク先のページを表示することになって、思い出せなかったのでメモです。

多分滅多に使うことはないと思うけれど・・・。
javascriptを使って、開く方法を試してみました。

別窓のサンプルページ

この記事の目次

  1. 今回の表示条件
  2. javasciptをheadの中に書いてみる
  3. リンク情報を書いてみる
  4. 便利サイト
  5. 参考にさせて頂いたサイト

ポップアップでリンク先のページを表示する方法

今回の表示条件

今回の「ポップアップでリンク先のページを表示する方法」の前提条件は以下となります。

表示条件
  • 別窓でリンク先のページを表示する
  • 開いているページは移動させない
  • ウィンドウサイズは指定する
  • スクロールバーをつける
  • ウィンドウのサイズを可変できるようにする

javasciptをheadの中に書いてみる

以下のコードをheadの中に書きました。widthとheightは数値は、別窓のサイズです。

リンク情報を書いてみる

通常リンク同様にのaタグを書きます。その中に以下のような文を入れます。この分は、複数行あっても大丈夫です。

これで別窓(ポップアップ)で、リンク先のページを表示させることができるようになりました。

複数、別窓でリンクしたい時は「openWin()」の名前を変えると複数対応できます。私は「openWin1()」「openWin2()」のようにしてみました。

便利サイト

表示する条件はもっと細かく設定できます。その記述が分からない場合、必要な項目にチェックや入力をするだけで簡単にjsを書き出してくれるサイトがありました。

サイズ等を決めて新しいウィンドウを開く|WEB上手さま

とても便利で助かりました!ありがとうございます!!

参考にさせて頂いたサイト

ABOUT ME
Resound Web Lab
Resound Web Lab 代表。 福岡県北九州市で、Web制作サポート・運営指導、女性の起業支援、カウンセリングをしています。 お客さま「らしさ」を引き出し、人とひと・人とモノを繋げていきます。 このサイトでは、Webの技術的な情報や、ご自身で情報発信をされる方に向けて、記事を更新しています。