Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to open link in a new window - JavaScript?
If you have a website or web application that requires users to click on links, it can be helpful to open those links in a new window. This is especially important if the user needs to stay on your site while they view the linked content.
Using JavaScript, you can easily configure all of your links so that they open in a new window when clicked.
The anchor tag in HTML is used in a very simple way to open new windows and tabs. JavaScript must be used to do the same task, though. The JavaScript function window.open() is useful.
The window.open() method in JavaScript
window.open() is a JavaScript method that allows you to open a new browser window or tab, with the specified URL. It can be used to open an HTML document, image file, PDF document, etc.
The window will have customizable features such as toolbars and scroll bars, depending on the parameters passed in the function call. This method also provides various options for controlling how the window appears on screen when it's opened.
Syntax
Following is the syntax for window.open()
window.open(URL, name, specs, replace);
Example
In the following example, we are running a script to open link in a new window
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>
Click Button To Open New Window
</p>
<button onclick="newwindow()">
Open
</button>
<script>
function newwindow() {
window.open("https://www.tutorialspoint.com/index.htm", "", "width=300, height=300");
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text along with a click button on the webpage. When the user clicks the button, the event gets triggered and opens a new window with the specified url.
Example
Look into another example using window.open()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<a href="https:///www.google.com" target="popup" onclick="window.open('https:///www.google.com','popup','width=500,height=500'); return false;">
GET THE POPUP WINDOW WITH LINK
</a>
</body>
</html>
On running the above script, the web-browser displays the anchor link on the webpage. If the user clicks the link, the event gets triggered and opens the content in the next window.
Example
Considering the following example, where we are creating a function to open new window at the same time to close the window.
<!DOCTYPE html>
<html>
<body>
<h2>Click Open and Close</h2>
<button onclick="openWindow()">Open </button>
<button onclick="closeWindow()">Close </button>
<script>
let myWindow;
function openWindow() {
myWindow = window.open("", "", "width=450,height=300");
}
function closeWindow() {
myWindow.close();
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text along with open and close buttons on the webpage. When the user clicks the open button, an event triggers the opening of a new window, and if the user clicks the close button, the window that was opened is closed.
Example
Let’s consider another example, where we are opening URL in new window and controlling it appearance.
<!DOCTYPE html>
<html>
<body>
<p>Click Button To Open New Window And Apply Specifications</p>
<button onclick="newwindow()">Click</button>
<script>
function newwindow() {
window.open("https://www.tutorialspoint.com/index.htm", "_blank","toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
}
</script>
</body>
</html>
On running the above script, the browser displays the text along with a click button on the webpage. When the user clicks the button, the event gets triggered and opens the URL in a new window with some specifications mentioned for that URL.
7K+ Views
