Open In New Tab JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of open in new tab JavaScript, the anchor tag in HTML is a simple and direct method for opening URLs in new tabs.
However, there are situations when JavaScript must be used to accomplish the same task. Now move to the opening new tab in JavaScript.
Step By Step Guide On Open In New Tab JavaScript :-
To execute extra tasks, such as opening a robot window, JavaScript provides built-in methods to open and dismiss the browser window.
These techniques assist in opening or closing pop-up windows in browsers. The window techniques are as follows:
- open()
- close()
By using the open technique, you can open a new web page in a new tab or window.
To close a web page that has been opened in a window, use the close method.
Window.open()
To open a new tab or window in the browser, JavaScript uses the predefined window method.
Your browser's settings or any parameters you entered into the window will determine this. Using the open() method, a new tab or window will open.
Almost all widely used online browsers, including Chrome, Firefox, and others, support this technique.
Syntax
There are four parameters this function accepts, but they are not required.
window.open(URL, name, specs, replace);
As demonstrated below, you may also use this function without the window keyword:
open(URL, name, specs, replace)
The two syntaxes are identical to one another.
List of Parameters
The list of window.open() method parameters is provided below. Keep in mind that each parameter in this method has a different function and is optional.
URL :- The window's optional argument. You can open a webpage by passing the URL string to the open() function. This function opens a new blank window if you don't supply any URLs
name :- You can specify the name of the window you want to open using this option. It backs the following principles:
- _blank: A new tab or window will open and load the _blankPassed URL.
- _parent: The parent window or frame that is already open will load the _parent URL.
- _self: By including this argument, the URL will open in a new window within the same frame, replacing the previous output.
- _top: Any frameset that can be loaded is replaced by the _top URL.
Name :- Give the name of the new window that will contain the text or any other data.
specifications :- The settings for this parameter are separated by commas. Whitespaces cannot be present in an element used with this value, such as width=150, height=100.
It backs a number of values.
replace :- This parameter of the window.open() method is optional, just like the others.
It either replaces the existing entry in the history list with a new one or produces a new one.
It returns either true or false since it supports two Boolean values:
- True: If the URL replaces the current record or page in the history list, return true.
- False: If the URL adds a new entry to the history list, return false.
Return Values
It will bring back a fresh window.
<html>
<body>
<script>
function openWindow() {
window.open('http://talkerscode.com/');
}
</script>
Welcome to Talkerscode <br><br>
<button onclick="openWindow()"> Open Window </button>
</body>
</html>
- In the first line of code, we start our with the help of <html> tag.
- After that we starts body of our code with the help of <body> tag.
- Then we start our script.
- We create the function openWindow()
- After that we use window.open function in which we add the url of our site.
- Then we end our script here.
- Then we print some text and after that We have used a button. By clicking on this button, window.open() method will call and open the website in new browser tab.
Conclusion :-
Hence, we have successfully learnt about the concept of opening new tab in JavaScript.
And also, we learnt that the open() method of the Window interface loads a specified resource into a new or existing browsing context.
I hope this article on open in new tab JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
