新しいウィンドウを開く open 【Javascript入門 #5】

2022年10月21日

みやちゃ

皆さんこんにちは、みやちゃです！

物理とプログラミングについて解説しています！

こちらの記事で、Railsのアプリケーション開発からRspecのテスト、herokuにデプロイまで解説しています！

javascriptで新しいウィンドウを開く方法をご紹介します。

今回は

新しいウィンドウを開く方法

この記事を読むと

新しいウィンドウを開けるようになります。

open

openメソッドは新しいウィンドウを開くためのメソッドです。

URLを指定することで、新しいウィンドウでそのURLのページを開くことができます。

それでは実際にコードを書いていきましょう。

以下のようにHTMLファイルとjsファイルの２つのファイルを用意します。

「js-sample.html」と「js-sample.js」の２つのファイルを用意します。

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");
};

１行目のvarで「div」という変数を宣言しています。

divをクリックすると、functionの中身のopenメソッドによって、「ymiyashitablog.com」のURLが新しいウィンドウで開かれます。

ブラウザで実際に確認してみましょう。

js-sample.htmlをブラウザで開くと、以下のような画面になっています。

「新しいウィンドウを開く」という文字列をクリックしてみましょう。

クリックしてみると、新しいウィンドウで「みやちゃのブログ」が開かれるはずです。

まとめ

いかがでしたでしょうか？

今回は、javascriptで新しいウィンドウの開き方をご紹介しました。

みやちゃ

ここまでご覧いただきありがとうございます！