Open a URL in a new tab

Code Snippet:

     
The HTML Anchor tag with the href Attribute
 
Example of the HTML a href Attribute
 Click to open in the same tab 
 Google.com Click to open in a different tab  

Method 2: Using the JavaScript methods to open a URL in a new tab:

It is another method to open a link in a new tab. Here, */users can use the JavaScript window.open() technique, which is quite simple and easy to use. Users only need to pass two arguments to the JavaScript window.open() method. The first is the URL of the web page, and the second argument is that users used in the HTML section, i.e., the target attribute in the anchor tag . The website needs this to specify where users want to open the link or URL. For example, » _blank .»

Let us see how to use this method:

• First, users use the _blank attribute as the second parameter of the JavaScript window.open() method to open the given link in a new tab.
• The window.open() returns a value as a reference to the newly created tab or window and returns a null if it fails to open a new tab.
• Lastly, users should not use the third parameter to the method as it will open a new window instead of a new tab.

• _blank — Open URL in new tab.
• _parent — Open URL in parent frame (Need to specify frame name)
• _self — Open URL in the current page
• _top — Open URL in any framesets that may be loaded

Code Snippet:

      
Click the button to open stechies.com in a new tab
 Open Google  

Method 3: Using the JQuery to open a specific URL in a new tab:

Code Snippet:

       
Click the button to open stechies.com in a new tab
 STechies.com  

Method 4: Using the JQuery to open all URL’s in a new tab:

Code Snippet:

       
Click the button to open stechies.com in a new tab
 STechies.com   

Finally, we have concluded the article on how to open a URL in a new tab using HTML and JavaScript. Users can use the anchor tag in HTML with the href and the _blank attributes, or they can also use the window.open() method of the JavaScript at the onClick event to create a button for clicking and opening a URL in a new tab.

Источник

How to Use HTML to Open a Link in a New Tab

Kris Koishigawa

Tabs are great, aren’t they? They allow the multitasker in all of us to juggle a bunch of online tasks at the same time.

Tabs are so common now that, when you click on a link, it’s likely it’ll open in a new tab.

If you’ve ever wondered how to do that with your own links, you’ve come to the right place.

The Anchor Element

If you click on the link above, the browser will open the link in the current window or tab. This is the default behavior in every browser.

To open a link in a new tab, we’ll need to look at some of the other attributes of the anchor element’s other attributes.

The Target Attribute

This attribute tells the browser how to open the link.

To open a link in a new tab, just set the target attribute to _blank :

Now when someone clicks on the link, it will open up in a new tab, or possibly a new window depending on the person’s browser settings.

Security concerns with target=»_blank»

I strongly recommend that you always add rel=»noreferrer noopener» to the anchor element whenever you use the target attribute:

This results in the following output:

The rel attribute sets the relationship between your page and the linked URL. Setting it to noopener noreferrer is to prevent a type of phishing known as tabnabbing.

What is tabnabbing?

Tabnabbing, sometimes called reverse tabnabbing, is an exploit that uses the browser’s default behavior with target=»_blank» to gain partial access to your page through the window.object API.

With tabnabbing, a page that you link to could cause your page to redirect to a fake login page. This would be hard for most users to notice because the focus would be on the tab that just opened – not the original tab with your page.

Then when a person switches back to the tab with your page, they would see the fake login page instead and might enter their login details.

If you’re interested in learning more about how tabnabbing works and what bad actors can do with the exploit, check out Alex Yumashev’s article and this one by OWASP.

If you’d like to see a safe working example, check out this page and its GitHub repo for more information about the exploit and the rel attribute.

In summary

It’s easy to use HTML to open a link in a new tab. You just need an anchor ( ) element with three important attributes:

1. The href attribute set to the URL of the page you want to link to,
2. The target attribute set to _blank , which tells the browser to open the link in a new tab/window, depending on the browser’s settings, and
3. The rel attribute set to noreferrer noopener to prevent possible malicious attacks from the pages you link to.

Again, here’s a full working example:

Which results in the following output in the browser:

Thanks again for reading. Happy coding.

Источник

How to Open a Link in a New Tab – HTML target blank Attribute Explained

There will be times where you will want your user to click on a website link and have it open in a new browser tab. But how do you do that in HTML?

In this article, I will show you how to use the target=»_blank» attribute through code examples. I will also talk about when you should consider using this attribute.

How to Open Up a New Browser Tab Using target=»_blank»

The target=»_blank» attribute is used inside the opening anchor tag like this:

When the user clicks on the link, a new browser tab will automatically open to that page.

In this example, I have nested a link inside a set of paragraph tags to direct people to freeCodeCamp.

When you click on the freeCodeCamp link, then it will open up a new browser tab for you.

If I were to omit the target=»_blank» attribute, then the default behavior would be to leave the current web page and go directly to the link without opening a new browser tab.

What is the noopener Keyword?

The noopener keyword in the rel attribute is used primarily for security reasons to prevent malicious users from messing with the original web page through the Window.opener property. If the malicious user gained access to your window object then they could redirect your page to a malicious URL.

You can use the noopener keyword as a way to help prevent that security issue from happening. Here is how the noopener keyword is used:

If you want to learn more about the security concerns that rel=noopener helped solve, then please read through this helpful article.

Updates to the noopener keyword

In 2021, there was an update made where modern browsers now set rel=noopener to any link using the target=_blank attribute. As you can see in this Can I use table, the noopener keyword is supported by most browsers except for Internet Explorer 11.

Even with this update, a lot of developers will still use rel=noopener for links using the target=_blank attribute.

Should You Use the target=»_blank» Attribute All the Time?

When users click on a link, the default behavior is to have that link open on the current page they are on without opening a new browser tab. In a lot of cases, you do not want to change this default behavior because users have grown to expect this.

You have to think carefully about when it would be a good time to use the target=»_blank» attribute. One good example would be if a user is working on a page and they don’t want to leave that page if they click on a link.

In this example, we are linking to the DevDocs documentation, so the user can stay on their current page and look up a reference on a new tab.

Conclusion

You can use the target=»_blank» attribute if you want your users to click on a link that opens up a new browser tab.

The target=»_blank» attribute is used inside the opening anchor tag like this.

The noopener keyword in the rel attribute is added to prevent malicious users from messing with the original web page through the Window.opener property.

You have to think carefully about when it would be a good time to use the target=»_blank» attribute because you don’t want to always change the default behavior of links.

I hope you enjoyed this article and best of luck on your programming journey.

Источник

How to open a link in a new tab with HTML and JavaScript

Many candidates are rejected or down-leveled due to poor performance in their System Design Interview. Stand out in System Design Interviews and get hired in 2023 with this popular free course.

In this Answer, we’ll learn how to use HTML and JavaScript to open a link in a new tab.

Open a link in a new tab with HTML

HTML (HyperText Markup Language) is a markup language that determines the content and structure of a web page.

Code example

Code explanation

• The element in HTML is used to integrate URLs in websites.
• The href attribute sets the link address that the user will be directed to when they click on the link text.
• The URL https://www.educative.io/ is the value of the href attribute.
• The target attribute determines where the link would be opened.
• The value of the target attribute _blank opens the link in a new tab.
• The text Educative is the link text between the opening tag and closing tag.

Open a link in a new tab with JavaScript

JavaScript is a programming language used to make websites more responsive, interactive, and user-friendly. It can access and modify an HTML web page’s content, define the set of instructions that the web page should follow, and react to events triggered by the browser or user.

To open a URL in a new tab/window in JavaScript, we use the window.open(URL, target) method. To open a new tab, however, we must use _blank as the second parameter of this method.

Note: Avoid adding a third parameter because the link will be redirected to a new window rather than a new tab.

Источник