この記事は約 3 分で読めます。
よくリンク設定で、「target=”_blank”」を入れて別タブで開くようにすることは多いですが・・・。
今回、たまたまポップアップでリンク先のページを表示することになって、思い出せなかったのでメモです。
多分滅多に使うことはないと思うけれど・・・。
javascriptを使って、開く方法を試してみました。
この記事の目次
- 今回の表示条件
- javasciptをheadの中に書いてみる
- リンク情報を書いてみる
- 便利サイト
- 参考にさせて頂いたサイト
ポップアップでリンク先のページを表示する方法
今回の表示条件
今回の「ポップアップでリンク先のページを表示する方法」の前提条件は以下となります。
表示条件
- 別窓でリンク先のページを表示する
- 開いているページは移動させない
- ウィンドウサイズは指定する
- スクロールバーをつける
- ウィンドウのサイズを可変できるようにする
javasciptをheadの中に書いてみる
以下のコードをheadの中に書きました。widthとheightは数値は、別窓のサイズです。
|
1 2 3 4 |
function openWin(){ リサウンドウェブラボ = window.open("http://resound-weblab.com/","リサウンドウェブラボ","width=820,height=600,scrollbars=yes,status=no,toolbar=no,location=no,menubar=no,directories=no,resizable=yes"); リサウンドウェブラボ.focus(); } |
リンク情報を書いてみる
通常リンク同様にのaタグを書きます。その中に以下のような文を入れます。この分は、複数行あっても大丈夫です。
|
1 |
<a href="javascript:void(0);" onclick="openWin()">ここをクリックすると別窓が開きます</a> |
これで別窓(ポップアップ)で、リンク先のページを表示させることができるようになりました。
複数、別窓でリンクしたい時は「openWin()」の名前を変えると複数対応できます。私は「openWin1()」「openWin2()」のようにしてみました。
便利サイト
表示する条件はもっと細かく設定できます。その記述が分からない場合、必要な項目にチェックや入力をするだけで簡単にjsを書き出してくれるサイトがありました。
サイズ等を決めて新しいウィンドウを開く|WEB上手さま
とても便利で助かりました！ありがとうございます！！
参考にさせて頂いたサイト
- サイズ等を決めて新しいウィンドウを開く|WEB上手さま
- 別ウィンドウにリンク先を表示させるには？｜ワニchanのうぇぶわーるどさま
- 新しく別ウィンドウを開く・ウィンドウを閉じる|タコの缶詰めさま
- 新しいウィンドウを開く｜JSすぐに使えるサンプル集さま
【広告】
【広告】
