All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Open URL In New Window

Last Updated : Jul 24, 2023

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.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪