0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptで *タブ* を作成する方法 windowオブジェクト

Last updated at Posted at 2020-03-19

タブとは何か?

タブとはドキュメントを切り替えて表示するためのGUIウィジェットである。一般的には長方形のボックス中にテキストラベルを表示する形で画面上部に表示され、タブの選択により管理するドキュメントを切り替えて表示させる仕組みとなっている。

wikipedia
https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%96_(GUI)

<完成品>
タブが作成されます!
スクリーンショット 2020-03-20 0.40.12.png
スクリーンショット 2020-03-20 0.39.53.png
スクリーンショット 2020-03-20 0.40.04.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<a href="javascript:window.open('sample2.html','','')">開く</a>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="top">
        新しいウィンドウ
        <!-- !ウィンドウを閉じる -->
        <a href="javascript:window.close()">閉じる</a>
    </div>
    
</body>
</html>

なんとHTMLにワンライナーでの記述で完了です。
<a>タグに javascript:window.open('sample2.html','','')記述します。


`window.open` **windowオブジェクトとはJavaScriptにあらかじめ用意されてるオブジェクトで、JavaScriptを何も書いてない状態でもwindowオブジェクトは利用する事が出来る。** >windowオブジェクトについて https://developer.mozilla.org/ja/docs/Web/API/Window

('sample2.html','','')
1つめがファイル名、2つめがウィンドウ名、3つめがプロパティが入ります。

簡単に記述できますね!
しかし、プライバシポリシー等で使用するケースは多いですよね!
是非開発の使ってみては?

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?