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

WordPressでRSSフィードを便利に使うプラグイン。

この記事は約 1 分で読めます。 以前、「WordPressサイトでRSSフィードボタンを設置してみた♪」でRSSフィードボタンを設置しました。 その後、RSSフィード関係で便利そうなWordpres …

no image

WordPressでオリジナルテーマ作りにチャレンジ【準備編】

この記事は約 1 分で読めます。WordPressに少し慣れてきたので、そろそろオリジナルテーマ作りにチャレンジしようと思います。 今までのテーマは、デフォルトであった「twentyten」や「cor …

no image

WordPressテーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …

no image

WordPressでシンプルな自作SNSボタンを設置してみた

この記事は約 1 分で読めます。 ブログの記事下に、いろんなSNSアイコンをよく見かけます。 このブログにも付けていたのですが、時々ちょっと重たさを感じていたのですが、先日書いた記事「WordPres …

no image

slideshow.jsを使って画像のスライドショーにチャレンジ。 

この記事は約 1 分で読めます。画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 たくさん方法があると思うので、いくつか試してみるつもりです。 まず今回は、「slid …