JavaScript Open URL In New Window
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of JavaScript open URL in new window, opening a url in newer window is an easy task. window.open() method to opening a new window and use window.open() method with custom size and position.
We can also add size and position including height, width, top, left to open a url in new window.
Step By Step Guide On JavaScript Open URL In New Window :-
Method 1 - Opening a link url in newer window using window.open() method
<html>
<head>
<title> open url in new window</title>
</head>
<body>
<button onclick=”opennew()”> open url in new window</button>
<script>
function opennew(){
var url= ‘https:// demo.com’;
window.open(url,’_blank’);
}
</script>
</body>
</html>
- Firstly, <html> tag it is the beginning of html document.
- Then we can use <head> tag it defines the head section of html document and head is both starting and closing tag.
- <title> tag defines the title name of html document in this code title name is “open url in new window”.
- <body> tag defines the content of html document
- This line “<button onclick=”opennew()”> open url in new window</button>” creates a button element and onclick attribute defines when the button is clicked, opennew() function called.
- After that, we create a javascript file named “script.js” all the javascript code write on script.js file.
- After that we can create a function opennew().
- We can create a variable name url where we can assign the url path.
- In this method, we use window.open() and ‘_blank’method to opening a link url in a newer window.
Method 2 - Open a url in a new window in javascript with custom size and position
<html>
<head>
<title> open url in new window</title>
</head>
<body>
<button onclick=”opennew()”> open url in new window</button>
<script>
function opennew(){
var url= ‘https:// demo.com’;
var width= 900;
var height= 700;
var top= 100;
var left= 100;
var output= ‘width=’ + width + ‘, height=’ + height+ ‘, top=’ + top+ ‘, left=’ + left;
window.open(url, ‘_blank’, output);
}
</script>
</body>
</html>
- Html code is same as previous method
- After that we can create javascript file named “script.js”
- Then, we create a function named opennew().
- Within a function we can create different-different variables name width,height,top , left this will define the height,width,top,left position of new window that we will opened.
- Then, we create a variable named output it will concatenating the values of height,width,top,left variables
- Then, we use window.open() method and _blank target opening a link url in a new window.
Conclusion :-
In conclusion, Opening a url in a new window is a easy task. window.open() method opening a link url in a newer window.
In window.open() method, we pass url and ‘_blank’ target to opening a link url in a newer window.
We can also adding size and position while open a url in a new window.
I hope this article on JavaScript open URL in new window helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
