HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのWindow nameプロパティとは？構文とサンプルコードで解説

はじめに

HTMLの window.name プロパティは、現在のウィンドウ（ブラウザ画面）に設定されている名前を取得・変更するためのプロパティです。JavaScriptから手軽にアクセスでき、ウィンドウの識別やフレーム間の連携などに活用できます。

基本情報

  • 取得： ウィンドウに設定された名前を文字列として返します。
  • 設定： 新しい名前を代入することで、ウィンドウ名を変更できます。

構文

window.nameプロパティの使い方は以下のとおりです。

1. 名前を取得する場合

window.name

2. 名前を設定する場合

window.name = "text";

サンプルコード

実際にwindow.nameプロパティを使った例を見てみましょう。ボタンをクリックすると、現在のウィンドウ名が画面に表示されます。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show {
        font-size: 1.2rem;
    }
</style>
<body>
<h1>HTML Window name Property Demo</h1>
<button onclick="display()" class="btn">Show window name</button>
<div class="show"></div>
<script>
    function display() {
        document.querySelector('.show').innerHTML = 'The current window name is: ' + window.name;
    }
</script>
</body>
</html>

実行結果

ページを開くと、次のような画面が表示されます。

HTMLのWindow nameプロパティとは？構文とサンプルコードで解説

「Show window name」ボタンをクリックすると、現在のウィンドウ名が表示されます。

HTMLのWindow nameプロパティとは？構文とサンプルコードで解説

まとめ

window.nameプロパティを使えば、ウィンドウの名前を簡単に取得・変更することができます。特に、別ウィンドウやiframeを扱う際に役立つので、ぜひ実際のコードで試してみてください。

  1. HTML WindowのpageYOffsetプロパティとは？使い方とコード例をわかりやすく解説

    pageYOffsetプロパティとはHTML WindowオブジェクトのpageYOffsetプロパティは、現在のドキュメントが垂直方向（上端）からどれだけスクロールされているかを、ピクセル単位の数値として返します。ページのスクロール位置を取得したい場合に便利なプロパティで、読み取り専用のため値の設定はできません。水平方向のスクロール量を取得したい場合は、同様にpageXOffsetプロパティを使用します。構文pageYOffsetプロパティの基本的な構文は以下のとおりです。window.pageYOffsetサンプルコードここでは、「Scroll」ボタンでページを10pxずつスクロールし、「

  2. HTML DOMのnameプロパティとは？構文と使い方を実例で解説

    HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン