JavaScript Open Link In New Tab
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of JavaScript open link in new tab, the building of websites is a common application for the flexible programming language JavaScript. Interacting with web components to enhance person enjoy is one in every of its middle talents.
The starting of a link in a brand new tab is a easy hassle that JavaScript can remedy.
When a hyperlink is clicked, builders may additionally speedy reroute viewers to a new tab or window via the usage of the window.Open() approach.
When called, the window.Open() technique accepts a URL as an argument and opens it in a new browser tab or window.
With the assist of this selection, web designers can also offer site visitors with a smooth browsing revel in that allows them to explore extra content even as staying on their present day page.
Additionally, the window.Open() technique gives a number of approaches to modify how the brand new tab behaves, which include specifying its length, look, and whether or not it have to be opened inside the background.
Now move to the concept of javascript open link in new tab.
Step By Step Guide On JavaScript Open Link In New Tab :-
<!DOCTYPE html>
<html>
<head>
<title>Open Link in New Tab</title>
<script>
function openLinkInNewTab(url) {
var newTab = window.open();
newTab.location.href = url;
}
function handleButtonClick() {
var linkUrl = "https://www.example.com";
openLinkInNewTab(linkUrl);
}
</script>
</head>
<body>
<button onclick="handleButtonClick()">Open Link in New Tab</button>
</body>
</html>
- We starts our code by HTML declaration.
- The "head" and "body" parts are placeswithin the "HTML" tag.
- Using the <title> element, we modified the web page's identify to "Open Link in New Tab" inside the <head> section.
- The JavaScript code is written in the <script> tags. OpenLinkInNewTab is the first feature that is mentioned.
- The link that we wish to open in a new tab is represented by the url argument that is required.
- The window.open() method is used inside the openLinkInNewTab function to open a new browser tab.
- The newTab variable holds the returned reference to the new tab.
- The new tab will then travel to the supplied URL as a result of the url parameter being set as the newTab.location.href attribute.
- handleButtonClick is the second function that has been defined.
- The onclick event of the button is handled by this function. handleButtonClick is invoked when the button is clicked.
- The value "https://www.example.com" is assigned to the variable linkUrl inside handleButtonClick.
- The URL that we wish to open in a new tab is this one.
- The linkUrl is then passed as a parameter when calling the openLinkInNewTab method.
- The <button> element is used to construct a button in the <body> section.
- The handleButtonClick function is selected as the onclick property.
- This indicates that the link will open in a new tab when the button is clicked, causing handleButtonClick to be triggered.
Conclusion :-
As a result, we had been capable of understand the concept of a javascript open hyperlink in new tab.
We additionally discovered that the window.Open() approach in javaScript offers a short and green way to open links in new tabs or home windows.
By following the offered code example, we can design a button that, when clicked, causes JavaScript functions to open a particular URL in a new tab.
I hope this article on JavaScript open link in new tab helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
