Javascript プログラミング

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

 

みやちゃ

 

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

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

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

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をブラウザで開くと、以下のような画面になっています。

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

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

まとめ

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

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

 

みやちゃ

 

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

© 2024 とあるエンジニアの備忘録ブログ Powered by AFFINGER5