Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Open Link in a New Window using JavaScript
If you want users to click on links and open those links in a new window becouse you want your user to stay on your site while they view the linked content. Then you need to use this solution.
By using JavaScript you can easily configure all of your links so that they open in a new window when clicked.
Approach to Open Link in a New Window
Using window.open() Method
JavaScript window.open() method 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.
Below are the Examples to Open Link in a New Window
Example 1
In this example we will open a new window with the defined window dimension.
<!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/css/index.htm", "",
"width=500, height=500");
}
</script>
</body>
</html>
Example 2
On running this 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 new window.
<!DOCTYPE html>
<html lang="en">
<head>
<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.tutorialspoint.com/javascript/index.htm','popup',
'width=500,height=500'); return false;">
JavaScript Tutorial
</a>
</body>
</html>
Example 3
On running this script, the browser displays the text along with a 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.
<!DOCTYPE html>
<html>
<body>
<p>Click Button To Open New Window</p>
<button onclick="newwindow()">Click</button>
<script>
function newwindow() {
window.open("https://www.tutorialspoint.com/javascript/index.htm",
"_blank","toolbar=no,scrollbars=no,resizable=yes,top=500,left=500,width=400,height=400");
}
</script>
</body>
</html>
Example 4
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.
<!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=500,height=300");
}
function closeWindow() {
myWindow.close();
}
</script>
</body>
</html>
9K+ Views
