JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでリンクを新しいポップアップウィンドウで開く方法

window.open()を使ってポップアップウィンドウを開く

リンクをクリックしたときに新しいポップアップウィンドウを表示したい場合は、JavaScriptのwindow.open()メソッドを使用します。<a>タグにtarget="popup"属性を指定し、onclickイベントでwindow.open()を呼び出すことで、指定したサイズのポップアップウィンドウを簡単に開くことができます。

ポイント

  • window.open(URL, ウィンドウ名, オプション): 第1引数にURL、第2引数にウィンドウ名、第3引数に幅や高さなどのオプションを指定します。
  • return false;: リンクのデフォルト動作（同じページへの遷移）をキャンセルし、ポップアップのみを表示させます。

サンプルコード

以下は実際のコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <a href="https:///www.google.com" target="popup"
       onclick="window.open('https:///www.google.com','popup','width=500,height=500'); return false;">
       GET THE POPUP WINDOW WITH LINK
    </a>
</body>
<script> 
</script> 
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html」（index.htmlなど）として保存します。次に、ファイルを右クリックし、VSCodeエディターで「Open with Live Server」を選択してブラウザで開いてください。

実行結果

まず、ブラウザ上には以下のようにリンクが表示されます。

JavaScriptでリンクを新しいポップアップウィンドウで開く方法

このリンクをクリックすると、新しいポップアップウィンドウ（幅500px・高さ500px）が開き、指定したサイトが表示されます。

実行結果は以下の通りです。

JavaScriptでリンクを新しいポップアップウィンドウで開く方法

このように、window.open()を活用すれば、ユーザーの操作に応じて別ウィンドウやポップアップを柔軟に制御できます。ポップアップブロッカーの設定によっては表示が妨げられる場合があるため、実装時には注意しましょう。

  1. Google検索結果を自動的に新しいタブで開く設定方法

    Google検索を使えば、ほとんどあらゆる情報を見つけることができます。しかし、情報量が多すぎて、かえって混乱してしまうこともあります。検索結果のリンクを開き、そこからさらに別のリンクをたどり、また次のページへ…と進んでいくうちに、最初に何を調べていたのか分からなくなってしまった経験はありませんか。 そんな「迷子」を防ぐために便利なのが、検索結果のリンクをクリックしたときに、自動的に新しいタブで開くように設定する方法です。この記事では、その設定手順をわかりやすく解説します。 Google設定でリンクを常に新規タブで開く方法 まず、お使いのブラウザでGoogleのトップページにアクセスします

  2. Google Chromeの設定画面を新しいウィンドウで開く方法【クイックヒント】

    Google Chromeには専用の設定画面が用意されており、通常はブラウザ右上のメニューアイコン(縦3点または横3本線)をクリックし、「設定」を選択することでアクセスできます。このとき、設定パネルは現在のウィンドウ内の新しいタブとして開きます。既存のタブを保持したまま設定を開けるため、特に問題はありません。しかし、作業中のタブを多数開いている場合など、設定パネルを独立した新しいウィンドウで開きたいと考えるユーザーも少なくありません。Chromeでは、隠し機能である「フラグ(flags)」を変更するだけで、これを簡単に実現できます。Google Chromeの設定を新しいウィンドウで開く手順1