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
Target a Window Using JavaScript or HTML
In this article we will learn how to use the TARGET attribute to open a website in a new window using HTML and JavaScript
TARGET attribute of HTML
A link's opening named frame or window is specified using the Target attribute of the <a> anchor tag. The concluding </a> tag in the HTML content must appear after each commencing <a> tag since the <a> element is paired. Although the href (hypertext reference) element of the anchor tag has several other options, it is required since it contains the URL of the webpage where the link will go when clicked.
Syntax
<a href="URL" target="_top"> Linked Text </a>
Attribute Values − The target window for the URL specified by the href attribute is referred to by this attribute. It may have any of the following values −
_top − It replaces any existing frames in order to load the webpage into the browser window using full-body.
_self − _self is the target attribute's default value by default. It opens the webpage in the same window or frame that the link was opened in.
_blank − A new browser window is opened when the webpage has loaded.
_parent − This method loads the webpage in the parent window or frameset.
The <FRAME> element of HTML, where the contents of the linked website will be shown, must have the NAME attribute supplied if you wish to load the contents of the webpage into some other frame. Additionally, the target attribute of the <a> element must be specified, as well as the name of the frame whose contents will be shown.
Example
In this example let us understand the use of target=" blank" as shown below. The webpage will open in a new window whenever a user clicks on the linked text.
<!DOCTYPE html> <html> <title>Target a Window Using JavaScript or HTML - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2 style="color:rgb(6, 92, 157);">The webpage will launch in a new window after clicking the link below.</h2> <a href="https://www.tutorialspoint.com/" target="_blank">Welcome to Tutorialspoint website!</a> </body> </html>
Using JavaScript, open the URL in a new tab
The anchor tag in HTML is a simple and direct method for opening URLs in new tabs. This section has more information on this tag. However, there are situations when Javascript must be used to achieve the same task. The window.open() method is beneficial in this situation. Based on the browser configuration and the parameter values, the window.open() method can be used to open a new browser window or new tab.
Strategy
We must use _blank in the second parameter in order to open a new tab with window.open() method.
The value of window.open() return. The reference returned by window.open() is either the newly generated window or tab or null if it failed.
Avoid adding a third parameter to it because doing so would cause a new window to open instead of a tab.
Syntax
window.open(URL, '_blank');
Example
In this example let us understand how to open the link (URL) in new tab with JavaScript window.open() method.
<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body style="text-align:center; padding-top: 50px;">
<p> Once you click the button <strong>tutorialspoint.com</strong> link will launch in a new tab
</p><br>
<button button type="button" class="btn btn-success" onclick="openNewTab()">
<strong>Open TutorialsPoint</strong>
</button>
<script>
function openNewTab() {
window.open(
"https://www.tutorialspoint.com/", "_blank");
}
</script>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<title>Target a Window Using JavaScript or HTML - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body style="text-align:center; padding-top: 50px;">
<p> Click the button to learn <strong>JavaScript</strong> with
<strong>tutorialspoint.com</strong> link, it will launch in a new tab</p><br>
<button button type="button" class="btn btn-success" onclick="myNewTab()">
<strong>Open TutorialsPoint</strong>
</button>
<script>
function myNewTab() {
window.open(
"https://www.tutorialspoint.com/javascript/index.htm", "_blank");
}
</script>
</body>
</html>
In Brief
In HTML, you must include the URL of the target page in the <a> href property of the anchor element if you want to direct users to another website. If you want the link to open in a new window of the browser, you must additionally include the target.
You may accomplish the same task in JavaScript by using the window.open() method. Even though we can complete this action with HTML as well, the JavaScript option is beneficial.
2K+ Views
