Login

Lost your password?
Don't have an account? Sign Up

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


User experience is extremely important for a successful website or web application. There are times when we want to redirect a user from our site to an external site without leaving our site. For example if a user clicks a link we might want the user to be redirected to another site in a new tab.

Let’s say we are building a photo sharing application, and every time the user selects the download link it needs to open that photo in a new tab. How do we do this?

Well, the simplest way to do this is to use HTML’s target attribute.  

When a user clicks on a link in our web-page we can open that link in a separate browser tab with the target HTML attribute. The code below will open the link in a new browser tab:

<a href="www.google.com" target="_blank">Open link in new tab</a>

Open link in new tab

The _blank value indicates that we want our link to open in a new blank tab. We can accomplish the same with JavaScript as well. Below is the JavaScript code snippet to do so.

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}


// html snpippet
// <div onclick="openInNewTab('www.test.com');">Some Link</div>

In the code above, we are using the window global object to open a URL in a new blank tab. We are also focusing on the window after it is opened.

If you are using a JavaScript framework (like Angular, React, or Vue) or if you already have a lot of JavaScript code in your project, feel free to use JavaScript to open links in a new window.

But there are some projects where you might want to use as little JavaScript possible.

For instance let’s say you are building an optimized mobile site for slow networks. In that case, you’d want to limit your JavaScript code.

Another example is HTML email templates. When you are developing HTML templates to send through via email engines (like Mailchimp or Mailgun) you can not include JavaScript with it because of security concerns (you can learn more about this topic here).

Alright let’s go back to our HTML target attribute. Besides _blank we can pass in several other values in this attribute. Below is a list of all values for the target attribute:

Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window

We have already seen how blank works. The self  value is the default behavior which opens the link in the same tab. _parent and _top are the two interesting ones.

Let’s say we have an iframe element embedded in our site, and inside that iframe there is another iframe. Here’s the code:


<div id="main">
    <iframe name="first_frame">
        <iframe name="nested"></iframe>
    </iframe>
</div>

Now let’s say we have a link in the nested iframe. If we were to set the target attribute to top it will open the link in the main browser div . In other words it skips all the iframes and opens the link in the main browser window.

On the other hand, if we were to use parent it would open the link in its parent iframe. In this case it will open in the first_frame.

We can also open the link in a separate window instead of a new tab. We can use the onclick HTML attribute and bind it with a JavaScript window.open command to achieve this.

Notice that we can also specify a width and a height for our new window where the link will be opened.

The target feature is currently supported in the following browsers:

browsers that support target

Although target element is supported by most of the modern browsers, there are some legacy browsers where the target feature is not available. For your reference here’s a list of them.  

  • Opera Mini (versionn 7.6 and below)
  • Android Browser (version 3 and below)
  • BlackBery default browser (pre 2015)

I hope you enjoyed this article. That’s all for today 😄.



Source link

https://avasta.ch

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*