How to Go to URL With Onclick in JavaScript

1. Go to URL Using window.open() in JavaScript
2. Go to URL Using window.location in JavaScript

The window object is one of the most important objects used to talk to the browser. It represents the browser’s window. All the global variables, functions become members of the window object. Location object of the window is used to get the current page URL and also to change the URL for redirection.

In today’s article, we will learn how to go to URL with onclick in JavaScript.

The JavaScript window object provides two ways, the first is using the location attribute, and the second is using the open() method.

Go to URL Using window.open() in JavaScript

It is a Window interface method provided by JavaScript, which loads specified URL/resource into a new tab or existing browser with the specified name. This method will generate a new window for opening a specified URL. Every time window.open() method returns it contains about:blank. The actual URL will be loaded once the current script block completes its execution.

Syntax of window.open() in JavaScript

window.open(url, windowName, windowFeatures);

Parameter

• url: It is a mandatory parameter that accepts valid URLs, image paths, or other resources supported by browsers. If an empty string is passed, it will open a new tab with a blank URL.
• windowName: It is an optional parameter, which specifies the name of the browsing context. This does not define the title of the window. Also, this window name should not contain any whitespace.
• windowFeatures: It is an optional parameter. This parameter accepts comma-separated window properties of a new tab either in the form of name=value or just name if the property is boolean. Some of the features are the default position and size of the window object.

Example code:

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

window.open('https://www.google.com');

Go to URL Using window.location in JavaScript

It is a read-only property of window.location, that returns the Location object. This object contains information on the current location of the document. Location object also contains other properties like href, protocol, host, hostname, port, etc.

Properties of window.location can also be accessed directly using location because the window object always remains at the top of the scope chain. Users can use the href property or assign the method of Location object to load/open other URL/resources.

Syntax

window.location = URL_PATH;
window.location.href = URL_PATH;
window.location.assign(URL_PATH);

Parameter

• URL_PATH: It is a mandatory parameter that accepts valid URL that needs to be opened. This URL can be an absolute URL, a relative URL, an anchor URL, or a new protocol.

Example code:

<button type="button" id="btn" onclick="openGoogle()">Open Google</button>

window.location = 'https://www.google.com';
window.location.href = 'https://www.google.com';