Javascript open url button

How to open new html page on button click in javascript

Hello Everyone, today I am going to share how do you open a new page after clicking html button in javascript ? Suppose you want to link a button to another page in HTML . Then you can use this method.

Example 1 :- Using window.open() method

The open() method is a pre-defined window method of JavaScript used to open the new window or tab in the browser.

For Example, I’m going to open «https://www.google.com» in a new tab.

Demo using open() method

button onclick=" myFunc()"> open in a new tab/button> script> function myFunc() window.open("https://www.google.com"); > /script>

You can use it in one link of code .

button onclick="window.open("https://www.google.com");">open tab/button>

By default,the open() method opens a new tab. Learn how to open new html page on button click in same window.

Onclick open url in same window

button onclick="window.open('https://www.3schools.in','_self');"> Open tab /button>

Example 2 :- using the location.href

button onclick="window.location.href = 'https://www.3schools.in';"> Open webpage /button>

Example 3 :- using location.replace

button onclick="window.location.replace('https://www.3schools.in');"> Open webpage /button>

How do you open a new page after clicking submit button in HTML. If you want to redirect to another page after submitting a form, Then you have to use action attribute .

Example 4 :- Form submit and open a new page.

form action="https://www.google.com/search?q text" value="3schools.in" name="q" > input type="submit" value="submit form"> /form>

To open the form in a different tab, use the target attribute.

form target='_blank' action="">/form> 

Open a new blank page in javascript.

In this post, I have explained how to open new html page on button click in javascript. I hope you have learned something new in this tutorial.

Источник

Open a URL in a new tab or window on button click in JavaScript

In JavaScript, you can use the window.open() method to open a URL in a new tab on a button click. It opens a new tab or a new browser window depending on the browser settings and the parameters passed.

1. Select the button element using the querySelector() method.
2. Add an event listener to the button.
3. In the event handler, use the window.open() method to open the link in a new tab.

To open a new tab, pass _blank as a second parameter to window.open() or skip the second parameter entirely and only pass the URL. Suppose you have the following tag somewhere on your web page:

button id="clickMe">Click Me!button> 

You want to ensure when the user clicks on the above button, a URL is opened in a new tab. Here is how you can do it in vanilla JavaScript:

const button = document.querySelector('#clickMe') // add click event listener button.addEventListener('click', () =>  // open a new tab const tab = window.open('https://attacomsian.com', '_blank') >) 

The above JavaScript code will open https://attacomsian.com in a new tab (or window), depending on the browser settings.

Another important thing you should know before using the window.open() method. The new tab or window is only opened as a direct result of a user action. In the above example, the URL is opened on the actual click event. However, if you make an asynchronous HTTP request when the user clicks and then opens a URL in a new tab on success, the browser will block the popup because it is not a direct user action. Here is an example that uses the Fetch API to make an AJAX call, and then open a new tab on a successful response:

button.addEventListener('click', () =>  // make an API call fetch('https://reqres.in/api/users') .then(res => res.json()) .then(json =>  // fail in Chrome - popup blocked const tab = window.open('https://attacomsian.com', '_blank') >) >) 

To make the above code work, we need to make a few changes. The first thing you should do is open an empty new window on click. Once the request is completed, update the actual window URL and set the focus. If the request fails, only close the window using the window.close() method. Here is the complete example that should work in all browsers:

button.addEventListener('click', () =>  // open an empty window const tab = window.open('about:blank') // make an API call fetch('https://reqres.in/api/users') .then(res => res.json()) .then(json =>  // TODO: do something with JSON response // update the actual URL tab.location = 'https://attacomsian.com' tab.focus() >) .catch(err =>  // close the empty window tab.close() >) >) 

To open a URL in a new window, make sure that the second parameter is the name of the window or empty. You can also specify the height and width of the window using the features attribute, as shown in the following example:

button.addEventListener('click', () =>  // open a new window const win = window.open('https://attacomsian.com', 'mysite', 'width=600,height=500') >) 

You might also like.

Источник

Go to URL With onclick in JavaScript

In JavaScript programming, there comes a situation where you want to access other websites by a provided link, or it is required to link your content or video with reference to another website. This approach can be utilized for a better understanding of the stated concept. Moreover, linking different web pages within a website saves the user’s time and enhances readability.

This blog will guide you about going to URL onclick in JavaScript.

Go to URL using “onclick” Event in JavaScript

To go to URL using onclick event in JavaScript, you can use:

• The “window.open()” method.
• The “window.location” object method.

We will now go through each of the mentioned methods one by one!

Method 1: Go to URL With onclick in JavaScript Using window.open() Method

In JavaScript, the “window.open()” method is used for opening a new browser window. You can also utilize this method to go to a specified URL using the button “onclick” event.

Here, “url” refers to the website link, “windowName” is the name of the window, and “specs” refers to the comma-separated list of items.

Look at the below-given example.

Example
In the example below, we will add a button and specify its “onclick” event in such a way that when the button is clicked, the onclick event will access the function “openGoogleByMethod()”:

Now, we will define a function “openGoogleByMethod()” and use the “window.open()” method and pass the “URL” of the “Google” site in it as an argument. This will result in opening the specified site in a new tab:

The output of the above implementation will result in:

Method 2: Go to URL With onclick in JavaScript Using window.location() Method

The “window.location()” method can be used to fetch the current page (“URL”) and then redirect the browser to a new page address. You can also utilize this method to access the specified URL using the “location” object.

Let’s go through the following example for better understanding:

Example
In our JavaScript, we will apply the “window.location()” method, where the “location” object will contain the information on the current location, which is “Google” in this case. The “window.location.href” property will then return the URL of the page specified in the window.location:

< script >
function openGoogleByMethod ( ) {
window. location ( «https://www.google.com» ) ;
window. location . href = «https://www.google.com» ;
}

Execution of the above-given code will result in the following output:

We have provided all the simplest methods to go to the URL by applying onclick in JavaScript.

Conclusion

In JavaScript, to go to URL with onclick, you can use the “window.open()” method to open the window with the specified “URL” or apply the “window.location” object method to specify the location of the specified URL and the “window.location.href” property to return the URL of the specified page.

This article has explained the methods to go to the URL using onclick in JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

Javascript open url button

Last updated: Jan 14, 2023
Reading time · 3 min

# Open a Link in a new tab on Button click in JavaScript

To open a link in a new tab on button click:

1. Select the button element.
2. Add an event listener to the button.
3. Use the window.open() method to open the link in a new tab.
4. For example, window.open(‘https://example.com’, ‘_blank’) .

Here are the contents of our index.html file.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> button onclick="window.open('https://google.com', '_blank')"> Open Google in a new tab button> button id="example-btn">Open Example in new tabbutton> script src="index.js"> script> body> html> 

The first button in the file has an inline click handler and the second button only has an id attribute set.

Copied! 
const exampleBtn = document.getElementById('example-btn'); exampleBtn.addEventListener('click', () =>  window.open('https://example.com', '_blank'); >); 

We used the document.getElementById method to select the button element.

The function we passed to the addEventListener method gets called every time the button is clicked.

In my opinion, defining a separate click handler is a much cleaner approach.

The first button in the index.html file uses an inline click handler, however, it’s much harder to get IDE support with inline event handlers than it is when writing code in a file with a .js extension.

The window.open method loads the specified URL into a new or existing browsing context.

The first parameter we passed to the method is the URL string.

Make sure that you prefix the URL with the protocol, e.g. https:// if you are linking to an external resource.

The second parameter the window.open() method takes is the target — a string that specifies the name of the browsing context.

By setting target to _blank , we open the resource in a new tab.

Technically, users are able to configure their browser to open the resource in a new window (not tab) when target is set to _blank , but this is very rare.

Another target option that’s commonly used is _self — it opens the URL in the current browsing context.

You can view all possible target options in this section of the MDN docs.

You might have also seen target set to _blank with anchor elements.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> button onclick="window.open('https://google.com', '_blank')"> Open Google in a new tab button> button id="example-btn">Open Example in new tabbutton> a href="https://google.com" target="_blank">Googlea> script src="index.js"> script> body> html> 

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник