Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML Window name Property
The HTML Window name property is used to get or set the name of the browser window. This property is particularly useful for identifying windows in multi-window applications, frame targeting, and inter-window communication.
Syntax
Following is the syntax for getting the window name −
window.name
Following is the syntax for setting the window name −
window.name = "windowName"
Return Value
The window.name property returns a string representing the name of the window. If no name has been set, it returns an empty string ("").
Getting Window Name
Following example demonstrates how to retrieve the current window name −
<!DOCTYPE html>
<html>
<head>
<title>Getting Window Name</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>HTML Window name Property Demo</h1>
<button onclick="display()" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">Show window name</button>
<div id="result" style="margin-top: 20px; font-size: 18px; color: #333;"></div>
<script>
function display() {
var windowName = window.name;
document.getElementById('result').innerHTML = 'The current window name is: "' + windowName + '"';
if(windowName === '') {
document.getElementById('result').innerHTML += ' (empty)';
}
}
</script>
</body>
</html>
The output shows the current window name, or indicates if it's empty −
The current window name is: "" (empty)
Setting Window Name
Following example demonstrates how to set and then retrieve the window name −
<!DOCTYPE html>
<html>
<head>
<title>Setting Window Name</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>Set Window Name Example</h1>
<button onclick="setName()" style="padding: 10px 20px; margin: 5px; font-size: 16px; cursor: pointer; background-color: #4CAF50; color: white; border: none;">Set Window Name</button>
<button onclick="getName()" style="padding: 10px 20px; margin: 5px; font-size: 16px; cursor: pointer; background-color: #008CBA; color: white; border: none;">Get Window Name</button>
<div id="output" style="margin-top: 20px; font-size: 18px; color: #333;"></div>
<script>
function setName() {
window.name = "TutorialsPointWindow";
document.getElementById('output').innerHTML = 'Window name set to: "TutorialsPointWindow"';
}
function getName() {
document.getElementById('output').innerHTML = 'Current window name: "' + window.name + '"';
}
</script>
</body>
</html>
First click "Set Window Name" to assign a name, then click "Get Window Name" to retrieve it −
Window name set to: "TutorialsPointWindow" Current window name: "TutorialsPointWindow"
Window Name with New Window
The window.name property is commonly used when opening new windows to identify them for later reference −
<!DOCTYPE html>
<html>
<head>
<title>Window Name with New Window</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>Open Named Window Example</h1>
<button onclick="openWindow()" style="padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #FF9800; color: white; border: none;">Open New Window</button>
<button onclick="checkName()" style="padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #9C27B0; color: white; border: none; margin-left: 10px;">Check This Window Name</button>
<div id="info" style="margin-top: 20px; font-size: 16px; color: #333;"></div>
<script>
function openWindow() {
var newWindow = window.open('', 'childWindow', 'width=400,height=300');
newWindow.document.write('<h2>Child Window</h2><p>This window name is: "' + newWindow.name + '"</p>');
document.getElementById('info').innerHTML = 'Opened new window with name: "childWindow"';
}
function checkName() {
document.getElementById('info').innerHTML = 'This window name: "' + window.name + '"';
}
</script>
</body>
</html>
The new window is created with the name "childWindow" and can be referenced later using that name.
Key Points
Following are the important aspects of the window.name property −
-
Persistence − The window name persists as long as the window remains open, even when navigating to different pages.
-
String Value − The name is always stored as a string, regardless of what type of value you assign to it.
-
Cross-Domain − The window name can be accessed across different domains within the same window, making it useful for cross-domain communication.
-
Target Reference − Named windows can be used as targets for links and forms using the
targetattribute.
Conclusion
The window.name property provides a simple way to identify and reference browser windows by assigning them unique names. It's particularly useful for multi-window applications, frame targeting, and maintaining data persistence across page navigations within the same window.
420 Views
