Webの記録

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

投稿日:

この記事は約 3 分で読めます。

window

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

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

多分滅多に使うことはないと思うけれど・・・。

javascriptを使って、開く方法を試してみました。

【修正・加筆しています】



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

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


別窓のサンプルページ


javasciptをheadの中に書いてみる

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

<script language="JavaScript" type="text/javascript">
<!--
function openWin(){
会社概要 = window.open("別窓で開くURL","会社概要","width=960,height=600,scrollbars=yes,status=no,toolbar=no,location=no,menubar=no,directories=no,resizable=yes");
会社概要.focus();
}
//-->
</script>


リンク情報を書いてみる

通常リンク同様にのaタグを書きます。その中に以下のような文を入れます。

この分は、複数行あっても大丈夫です。

<a href="javascript:void(0);" onclick="openWin()">リンクしたい文字や画像</a>


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

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


便利サイト

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

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

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


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

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

気になるブラウザサイズ 集計結果。

この記事は約 2 分で読めます。 最近、Webサイトを作るのにどれ位の幅で作れば良いのかとても迷ってきました。 いろんな方のサイトをいじらせてもらいながら、表示確認をしていて驚く事もしばしば・・・。 …

no image

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

この記事は約 1 分で読めます。 PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。 スマホからの見え方をチ …

no image

WordPressサイト内検索でのキーワードが分かるプラグライン「Search Meter」を試してみた。

この記事は約 1 分で読めます。 アクセス解析をしていると、どんなキーワードで検索されたのか?を知ることができます。 しかし、キーワードを入力して検索できなかった結果を知る事はなかなか知る事ができない …

no image

OS+ブラウザごとのcssが簡単に書けるJavaScript「CSS Browser Selector」

この記事は約 1 分で読めます。 「このブラウザだけデザインが崩れてる?!」というのはよくあることで、時々cssにブラウザハックを書かねばならないことがありました。 そんな時、ほんの少しcssでクラス …

no image

無料で高機能なメールフォーム「メールフォームプロCGI」を設置してみた

この記事は約 1 分で読めます。 通常の静的なWebサイトにお問い合せフォームをつける時、自分でCGIを用意しないといけない場合、いろいろ探すのに大変でした。。。 無料でなら尚更・・・で、広告とか入っ …