✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

JavaScript Open URL In New Window

Last Updated : Jul 24, 2023

IN - JavaScript

JavaScript Open URL In New Window

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>
  1. Firstly, <html> tag it is the beginning of html document.
  2. Then we can use <head> tag it defines the head section of html document and head is both starting and closing tag.
  3. <title> tag defines the title name of html document in this code title name is “open url in new window”.
  4. <body> tag defines the content of html document
  5. 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.
  6. After that, we create a javascript file named “script.js” all the javascript code write on script.js file.
  7. After that we can create a function opennew().
  8. We can create a variable name url where we can assign the url path.
  9. 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>
  1. Html code is same as previous method
  2. After that we can create javascript file named “script.js”
  3. Then, we create a function named opennew().
  4. 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.
  5. Then, we create a variable named output it will concatenating the values of height,width,top,left variables
  6. 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.

Latest Tutorials