JavaScript Window name Property: Window Name

Table of Contents

JavaScript Window `name` Property: A Comprehensive Guide

The JavaScript window.name property is a string value that sets or returns the name of a window or iframe. This property is useful for referencing a window, especially when dealing with multiple windows or iframes within a web application. It allows for communication and targeting of specific windows.

Purpose of the `window.name` Property

The primary purposes of the window.name property are to:

Identify a window or iframe uniquely.
Target a specific window for actions like form submissions or data transfer.
Persist data across different pages within the same domain during a session.

Syntax

The syntax for getting and setting the window.name property is straightforward:

// Get the name of the current window
let windowName = window.name;

// Set the name of the current window
window.name = "MyWindowName";

Practical Examples

Let’s explore some practical examples to illustrate how to use the window.name property effectively.

Example 1: Setting and Retrieving Window Name

This example demonstrates how to set and retrieve the name of the current window.

<!DOCTYPE html>
<html>
<head>
    <title>Window Name Example</title>
</head>
<body>
    <h1>Window Name Example</h1>
    <p id="nameDisplay1">Window Name: </p>

    <script>
        // Set the window name
        window.name = "myUniqueWindow";

        // Retrieve and display the window name
        const windowName1 = window.name;
        document.getElementById("nameDisplay1").textContent = "Window Name: " + windowName1;
    </script>
</body>
</html>

Output:

Window Name: myUniqueWindow

Example 2: Targeting a Window Using `window.name`

This example shows how to target a specific window using its name attribute when opening a new window with window.open().

<!DOCTYPE html>
<html>
<head>
    <title>Target Window Name Example</title>
</head>
<body>
    <h1>Target Window Name Example</h1>
    <button onclick="openTargetWindow()">Open Targeted Window</button>

    <script>
        function openTargetWindow() {
            // Open a new window and assign it a name
            window.open("about:blank", "targetWindowName");

            // After a delay, set the location of the target window
            setTimeout(() => {
                const targetWindow = window.open("", "targetWindowName");
                if (targetWindow) {
                    targetWindow.location = "https://www.example.com";
                }
            }, 1000);
        }
    </script>
</body>
</html>

When you click the button, a new blank window named “targetWindowName” will open, and after a 1-second delay, it will navigate to https://www.example.com.

Example 3: Using `window.name` for Data Persistence

The window.name property can persist data across different pages within the same domain during a session. Here’s an example of how you can use it:

<!DOCTYPE html>
<html>
<head>
    <title>Data Persistence with Window Name</title>
</head>
<body>
    <h1>Data Persistence with Window Name</h1>
    <p id="dataDisplay2">Data: </p>
    <button onclick="setData()">Set Data</button>
    <button onclick="getData()">Get Data</button>

    <script>
        function setData() {
            window.name = "{\"username\": \"CodeLucky\", \"theme\": \"dark\"}";
        }

        function getData() {
            try {
                const userData = JSON.parse(window.name);
                document.getElementById("dataDisplay2").textContent = "Data: Username - " + userData.username + ", Theme - " + userData.theme;
            } catch (e) {
                document.getElementById("dataDisplay2").textContent = "Data: No data available";
            }
        }
    </script>
</body>
</html>

Explanation:

setData() Function: This function sets the window.name property to a JSON string containing user data (username and theme).
getData() Function: This function retrieves the data from window.name, parses it from a JSON string back into a JavaScript object, and displays the data. If window.name does not contain valid JSON data, it displays “No data available.”

Output:

Initially, clicking “Get Data” will show:

Data: No data available

After clicking “Set Data” and then “Get Data”, it will show:

Data: Username - CodeLucky, Theme - dark

Example 4: Using `window.name` with `iframe`

This example demonstrates how to set and retrieve name property of iframe using JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Iframe name Example</title>
</head>
<body>
    <h1>Iframe name Example</h1>
    <iframe src="about:blank" id="myIframe"></iframe>
    <p id="iframeNameDisplay">Iframe Name: </p>

    <script>
        // Get the iframe element
        const iframeElement = document.getElementById("myIframe");

        // Set the iframe name using JavaScript
        iframeElement.name = "myUniqueIframe";

        // Retrieve and display the iframe name
        const iframeName = iframeElement.name;
        document.getElementById("iframeNameDisplay").textContent = "Iframe Name: " + iframeName;
    </script>
</body>
</html>

Output:

Iframe Name: myUniqueIframe

Key Considerations

Security: Be cautious when using window.name to store sensitive data, as it is accessible to scripts within the same domain. Avoid storing confidential information directly.
Data Type: The window.name property stores data as a string. Convert your data to and from strings as necessary (e.g., using JSON.stringify() and JSON.parse()).
Scope: The window.name property is specific to the window or iframe in which it is set. It does not automatically propagate across different windows or domains.

Browser Support

The window.name property is supported by all major browsers, including:

Chrome
Firefox
Safari
Edge
Opera

Conclusion

The window.name property in JavaScript is a versatile tool for identifying windows, targeting specific windows, and persisting data across pages within the same domain. By understanding its syntax and use cases, you can effectively leverage this property to enhance your web applications. Remember to handle data securely and be mindful of the scope when using window.name for data persistence.