1 概要
2 プログラム例:固定の文字列を表示する場合
- 2.1 コード
- 2.2 解説
- 2.3 実行結果
3 プログラム例:動的にタブの文字列を変更する場合
- 3.1 コード
- 3.2 解説
- 3.3 実行結果
4 プログラム例:一定時間でタブの文字列を変化させる例
- 4.1 コード
- 4.2 解説
- 4.3 実行結果

Webブラウザーのタブの文字列を変更する - JavaScript

Webブラウザのタブの文字列を変更するコードを紹介します。

概要

Webブラウザのタブ部分に表示される文字列を変更した場合があります。タブ部分に表示される文字列は、titleタグで設定されたページタイトルが表示されます。ページタイトルが空文字列の場合は、URLがタブに表示されます。タブに表示される文字列を変更する場合は、固定値でよい場合はtitleタグで設定し、動的に変更する場合はJavascriptのdocument.titleプロパティを利用します。

プログラム例:固定の文字列を表示する場合

固定の文字列を表示する場合はtitleタグを記述します。

コード

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

Title.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>テストのタイトル</title>
</head>
<body>
    <h2>テストページ</h2>
  <p>テストページです。</p>
</body>
</html>

解説

titleタグに文字列を設定しページタイトルを設定するとページタイトルがWebブラウザのタブに表示されます。

実行結果

上記のHTMLをWebブラウザで表示します。titleタグの文字列がタブに表示されます。

プログラム例:動的にタブの文字列を変更する場合

動的にタブの文字列を変更する場合は、Javascriptでdocument.titleプロパティを変更します。

コード

ChangeTitle.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>テストページ</title>
    <script type="text/javascript">
        function ChangeTitle() {
            document.title = "変更したタイトル";
        }
    </script>
</head>
<body>
    <h2>テストページ</h2>
    <input type="button" value="Exec" onclick="ChangeTitle();"/>
</body> 
</html>

解説

ページに配置したボタンをクリックすると、ChangeTitle() 関数を実行し、ページタイトルを変更します。
ChangeTitle() 関数では、document.title プロパティに文字列を代入して、ページのタイトルを変更します。

        function ChangeTitle() {
            document.title = "変更したタイトル";
        }

実行結果

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。タブのキャプションにはページのタイトルの「テストページ」が表示されています。

[Exec]ボタンをクリックします。ページのタイトルが変更され、タブの文字列が、「テストページ」から「変更したタイトル」に変わります。

プログラム例:一定時間でタブの文字列を変化させる例

タイマーを利用して一定時間ごとにタブの文字列を変更する実装例です。

コード

ChangeTitleInterval.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    var flag = 0;

    function startTimer() {
      setInterval(onTimer, 1000);
    }

    function onTimer() {
      switch (flag) {
        case 0:
          document.title = "AAAAAAA";
          flag = 1;
          break;
        case 1:
          document.title = "BBBBBBB";
          flag = 2;
          break;
        case 2:
          document.title = "CCCCCCC";
          flag = 0;
          break;
      }
    }
  </script>
</head>
<body onload="startTimer();">
  <h2>テストページ</h2>
</body>
</html>

解説

ページのロード時に startTimer()関数を実行しsetInterval()関数を呼び出してタイマー処理を開始します。
今回の例では、1秒ごとに onTimer() 関数が呼び出される動作になります。タイマー処理の詳細についてはこちらの記事を参照してください。

onTimer関数では、flag の値に応じて document.title プロパティの値を変更しています。変更後、flagの値を変更して次にonTimer関数が実行された際には別のテキストを表示するようにします。

    function onTimer() {
      switch (flag) {
        case 0:
          document.title = "AAAAAAA";
          flag = 1;
          break;
        case 1:
          document.title = "BBBBBBB";
          flag = 2;
          break;
        case 2:
          document.title = "CCCCCCC";
          flag = 0;
          break;
      }
    }