iPentec.com / Document / カテゴリ: JavaScript / タグ: JavaScript URL処理

指定したURLを別ウィンドウで開くコードと実行結果

概要

JavaScriptでURLを開く場合は "window.open()"メソッドを利用します。新しいウィンドウでURLを開く場合は第二引数のtargetに"_blank"または、ターゲットウィンドウの名称を指定します。

補足

ウェブブラウザのウィンドウを開かずにページを切り替える場合は、「指定したURLにページ遷移するコードと実行結果」の記事を参照してください。

実装例:相対URLの例

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <h3>JavaScriptでウィンドウを開く</h3>
  <p>JavaScriptで指定したURLを新しいウィンドウを開いて表示します。</p>
  <a href="javascript:void(0);" onclick="window.open('Destination.html','_blank')">新しいウィンドウで開く</a>
</body>
</html>

遷移先のページ (Destination.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h3>遷移先のページ</h3>
  <p>テストの遷移先ページです。</p>
</body>
</html>

解説

リンクをクリックした際にonclickイベントが実行されます。JavaScriptのwindow.open()メソッドを呼び出し第一引数で指定したURLを開きます。第二引数に"_blank"をターゲットに指定し、新しいウィンドウで指定したURLを開く動作にします。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。[新しいウィンドウで開く]リンクをクリックします。
指定したURLを別ウィンドウで開くコードと実行結果:画像1

リンクをクリックすると新しいタブで別ウィンドウが表示され指定したURLが表示されます。
指定したURLを別ウィンドウで開くコードと実行結果:画像2

実装例:URLを開く例

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <h3>JavaScriptでウィンドウを開く</h3>
  <p>JavaScriptで指定したURLを新しいウィンドウを開いて表示します。</p>
  <a href="javascript:void(0);" onclick="window.open('https://www.ipentec.com','_blank')">新しいウィンドウで開く</a>
</body>
</html>