![](https://ymiyashitablog.com/wp-content/uploads/2021/09/6917aa6aeb268522240d2c3e66810199-802x600.png)
![](https://www16.a8.net/0.gif?a8mat=3BMLAN+D15LGY+3L4M+7925D)
![](https://ymiyashitablog.com/wp-content/uploads/2020/09/ym23583500509101219321.jpg)
みやちゃ
javascriptで新しいウィンドウを開く方法をご紹介します。
- 新しいウィンドウを開く方法
新しいウィンドウを開けるようになります。
open
openメソッドは新しいウィンドウを開くためのメソッドです。
URLを指定することで、新しいウィンドウでそのURLのページを開くことができます。
それでは実際にコードを書いていきましょう。
以下のようにHTMLファイルとjsファイルの2つのファイルを用意します。
「js-sample.html」と「js-sample.js」の2つのファイルを用意します。
js-sample.htmlの中身は以下のようにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Practice</title>
<link rel="stylesheet" href="js-sample.css">
</head>
<body>
<div id="container">新しいウィンドウを開く</div>
<script type="text/javascript" src="js-sample.js" charset="utf-8"></script>
</body>
</html>
9行目のdivの「新しいウィンドウを開く」という文字列をクリックすると、新しいウィンドウが開くようにjsファイルを編集していきます。
「js-sample.js」ファイルに以下のようなコードを書きます。
var div = document.getElementById("container")
div.onclick = function(){
open("https://ymiyashitablog.com");
};
1行目のvarで「div」という変数を宣言しています。
divをクリックすると、functionの中身のopenメソッドによって、「ymiyashitablog.com」のURLが新しいウィンドウで開かれます。
ブラウザで実際に確認してみましょう。
js-sample.htmlをブラウザで開くと、以下のような画面になっています。
![](https://ymiyashitablog.com/wp-content/uploads/2021/09/bce90315365c633d3584f5fb0c754b2a-986x600.png)
「新しいウィンドウを開く」という文字列をクリックしてみましょう。
クリックしてみると、新しいウィンドウで「みやちゃのブログ」が開かれるはずです。
![](https://ymiyashitablog.com/wp-content/uploads/2021/09/6ec3ac5ca9115c9e83ca6d0cbf0390cb-744x600.png)
まとめ
いかがでしたでしょうか?
今回は、javascriptで新しいウィンドウの開き方をご紹介しました。
![](https://ymiyashitablog.com/wp-content/uploads/2020/09/ym23583500509101219321.jpg)
みやちゃ
ここまでご覧いただきありがとうございます!