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 DOM Window stop() Method
The HTML DOM Window stop() method provides functionality to stop loading the resources of a window programmatically. This method is equivalent to clicking the browser's stop button and halts the loading of all resources including images, stylesheets, and scripts for the current window.
Syntax
Following is the syntax for the Window stop() method −
window.stop()
The method takes no parameters and returns no value. It simply stops the loading process of the current window.
How It Works
When window.stop() is called, it immediately halts all ongoing resource loading for that specific window. This includes −
Images that are still downloading
Stylesheets being loaded
JavaScript files being fetched
Any other network requests initiated by the page
The method is particularly useful in scenarios where you want to conditionally stop page loading based on user input or specific conditions.
Basic Example
Following example demonstrates a simple usage of the Window stop() method −
<!DOCTYPE html>
<html>
<head>
<title>Window stop() Basic Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Window stop() Method Demo</h2>
<p>Click the button to stop loading this page:</p>
<button onclick="stopLoading()">Stop Loading</button>
<p id="message"></p>
<script>
function stopLoading() {
window.stop();
document.getElementById("message").textContent = "Page loading stopped!";
}
</script>
</body>
</html>
Clicking the "Stop Loading" button will halt any ongoing resource loading and display a confirmation message.
Conditional Loading Control Example
Following example shows how to use Window stop() with conditional logic −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Window stop()</title>
<style>
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
text-align: center;
font-family: Arial, sans-serif;
}
input[type="text"], input[type="url"] {
width: 80%;
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 15px;
margin: 5px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#status {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
font-weight: bold;
}
.success { background-color: #d4edda; color: #155724; }
.error { background-color: #f8d7da; color: #721c24; }
</style>
</head>
<body>
<div class="container">
<h2>Access Control with Window stop()</h2>
<input type="url" id="urlInput" placeholder="Enter URL (e.g., https://www.example.com)" value="https://www.tutorialspoint.com">
<input type="text" id="nameInput" placeholder="Enter access code (use 'admin')">
<button onclick="attemptAccess()">Access URL</button>
<div id="status"></div>
</div>
<script>
var childWindow;
function attemptAccess() {
var url = document.getElementById("urlInput").value;
var accessCode = document.getElementById("nameInput").value;
var statusDiv = document.getElementById("status");
if (accessCode === 'admin') {
childWindow = window.open(url, "accessWindow", "width=600,height=400");
statusDiv.className = "success";
statusDiv.textContent = "Access granted! New window opened.";
} else {
window.stop();
statusDiv.className = "error";
statusDiv.textContent = "Access denied! Page loading stopped.";
}
}
</script>
</body>
</html>
This example demonstrates access control where entering the correct code opens a new window, while incorrect credentials trigger window.stop() to halt the loading process.
When access code is "admin": Access granted! New window opened. When access code is incorrect: Access denied! Page loading stopped.
Browser Compatibility
The window.stop() method has good browser support but behaves differently across browsers −
| Browser | Support | Notes |
|---|---|---|
| Chrome | Yes | Stops all resource loading |
| Firefox | Yes | Equivalent to pressing Escape key |
| Safari | Yes | Similar to stop button |
| Edge | Yes | Standard behavior |
| Internet Explorer | Limited | May not work in all versions |
Key Points
Following are important points to remember about the Window stop() method −
The method only stops loading for the current window, not for child windows or frames
It does not prevent JavaScript execution that is already running
Resources that have already loaded remain available on the page
The method is most effective when called during the initial page load process
It cannot stop resources that are loaded programmatically after the initial page load
Conclusion
The Window stop() method provides a programmatic way to halt resource loading in a browser window, equivalent to clicking the browser's stop button. It is most commonly used in conditional loading scenarios and access control implementations where you need to prevent certain resources from loading based on specific criteria.
318 Views
