Open URL In New Tab JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of open URL in new tab JavaScript, in JavaScript with the Window object, we can use two events: open() and close().
In this tutorial, We are going to use a window.open() method here. The syntax for window.open() is,
Window.open(URL,name,specs)
Step By Step Guide On Open URL In New Tab JavaScript :-
In the example below, we are going to see two different examples on window.open() method.
Example 1
<!DOCTYPE html>
<html lang = " en " >
<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 " >
<title> open URL in new tab JavaScript </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> open URL in new tab JavaScript </h3>
<button onclick="openLink();"> Click! </button>
<script>
function openLink() {
window.open (" https://www.talkerscode.com/");
}
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a <button> with an onclick with a function.
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- Create the function, and within it add window.open(URL)
- By clicking on the URL button, we can open the URL in a new tab.
Example 2
<!DOCTYPE html>
<html lang="en">
<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">
<title> open url in new tab javascript </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> open url in new tab javascript </h3>
<div>
<input type="url" placeholder="enter Url">
<button> click!! </button>
</div>
<script>
let btn = document.querySelector('button') ;
let input = document.querySelector('input') ;
btn.addEventListener('click' , () => {
window.open(input.value,'_blank') ;
})
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a<input> tag with type ‘text’ and placeholder. Then create a <button> too.
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- Using document.querySelector() for both the <button> and <input> tag.
- Add the .addEventListner() tag with ta btn.
- window.open(input.value, ‘_blank’) to open the input URL into the new tab. The ‘_blank’ is used here to open the URL in new window or tab.
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to open URLs in a new tab JavaScript.
I hope this article on open URL in new tab JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
