Jquery link new windows

newWindow: a simple plugin for jQuery

It’s very easy to make links open in a new window using jQuery, but to do it in an accessible way you also have to inform users that this will happen.

newWindow makes it easy to open new browser windows, in a way that complies with Success Criterion 3.2.5 of WCAG 2.0.

It makes use of the methods outlined in Techniques for WCAG 2.0, namely SCR24 and H83, as well as adding a couple of extra enhancements.

To use newWindow first load jQuery and then the plugin:

Then, on DOM ready, call newWindow on any links that you want to open in a new window.

For example, to open links with a class of ‘new-window’ in a new window, do the following:

That’s all folks!

What will happen

Using newWindow on a link will do the following:

Use the target attribute to open the link destination in a new window. This provides a machine-readable indication that a new window will open, allowing the user agent a) to be configured to prevent this from happening or b) to inform the user what will happen. Using javascript to add the target attribute means that this technique can be employed when the document type does not allow the target attribute, e.g. HTML 4.01 Strict or XHTML 1.0 Strict.

Append a span element with a class of ‘assistive-text’, and containing the phrase ‘(opens in a new window)’, to the link text. This makes sure all users, not only those using assistive technology, are aware the link opens in a new window. The class can be used to style the text in a more pleasing way, see below.

If there is a title attribute on the link, the phrase ‘(Opens in a new window)’ is added to the value. If there is no title attribute present, then one is created with the value ‘(This link opens in a new window)’. This gives a tooltip if a user hovers over the link.

Styling the assistive text

Due to design constraints having the text ‘(opens in a new window)’ added to link text is often undesirable. Using the class of ‘assistive-text’ it is possible to replace this text with an icon, while still making it available to assistive technologies such as screen readers. An example of how this can be done can be found in the file new-window.css.

Instead of using CSS to display an icon, the same effect could be achieved by appending an icon image to the link, with an alt attribute value of ‘opens in a new window’. This has the added advantage of indicating to sighted users how the link will function even if they have images disabled. However, under certain circumstances, a bug in JAWS 11 prevents the alt text of the image from being read out when it is included alongside other link text, and so the above method was employed instead.

Copyright (c) 2011 Gareth Eschild. Licensed under the MIT License

Make a link open a new window (not tab) [duplicate]

Is there a way to make a link open a new browser window (not tab) without using javascript?

5 Answers 5

With pure HTML you can’t influence this — every modern browser (= the user) has complete control over this behavior because it has been misused a lot in the past.

HTML option

You can open a new window (HTML4) or a new browsing context (HTML5). Browsing context in modern browsers is mostly «new tab» instead of «new window». You have no influence on that, and you can’t «force» modern browsers to open a new window.

In order to do this, use the anchor element’s attribute target [1] . The value you are looking for is _blank [2] .

JavaScript option

Forcing a new window is possible via javascript — see Ievgen’s excellent answer below for a javascript solution.

(!) However, be aware, that opening windows via javascript (if not done in the onclick event from an anchor element) are subject to getting blocked by popup blockers!

_{[1] This attribute dates back to the times when browsers did not have tabs and using framesets was state of the art. In the meantime, the functionality of this attribute has slightly changed (see MDN Docu)}

_{[2] There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent , _self or _top .}

wpscholar / jquery.external-links-new-window.js

/**

* Open all external links in a new window

*/

jQuery ( document ) . ready ( function ( $ ) <

$ ( ‘a’ )

. filter ( ‘[href^=»http»], [href^=»//»]’ )

. not ( ‘[href*=»‘ + window . location . host + ‘»]’ )

. attr ( ‘rel’ , ‘noopener noreferrer’ )

. attr ( ‘target’ , ‘_blank’ ) ;

> ) ;

This comment has been minimized.

Copy link Quote reply

YupItsZac commented Nov 16, 2015

Nice gist, @wpscholar. I wrote a jQuery plugin for this that includes several options for customizing the way external links and files are handled.

This comment has been minimized.

Copy link Quote reply

wpscholar commented Sep 21, 2017

This comment has been minimized.

Copy link Quote reply

mpiprojects commented Jan 2, 2018 •

Assuming I can add «nofollow» to the rel attribute as well. Could you give me an example script on how to add an exception, for when the A tag has Where only the target attribute is set and the rel attribute is left empty. Many thanks and happy new year!

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Open Link in a New Window

HTML attribute (valid in HTML5 now):

Inline JavaScript way:

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

Comments

I think some code might have gotten stripped there. Feel free to email me at [email protected] to fix.

Using the second approach opens the href in my current (parent) window too. i.e. my current window and new window both points to href value. I don’t want my parent window to be changed

My purpose was to open a link in new window,

i tried this, but my parent window(which has link) becomes blank when i click on the link.

It doesn’t work because it should be:

onclick=”window.open(this.href,’_blank’); return false;”

it doesnt though

Target-blank is not strict xhtml (it might be considered as behaviour that should not be placed in the mark-up) and it can make people angry when used on every link, especially the internal ones. But sometimes it can be useful, if there’s an external link among many internal links.
Personally I prefer to use CSS-Content to set a “(ext)” behind those links via auto-detection (attr).

I’d say it’s a bad practice. Because if I want to open link in new window, jsut press shift+mouse key. Or middle button (to open in new tab).

I’d say it’s the best practice to use target=”_blank”, because it simply works.
There are people who don’t know that you can press the middle mouse button or other shortcuts. Nobody will see it at the end. Why should I not break the rule on this point?

How with auto open in new windows?

sorry, i’m newbie in CSS 😀

Thanks! PDFs don’t seem to honor _blank.

hey Jason, for PDF’s use, target=”_new”

This snippet was very useful, thank you!

I think this article is misleading, it clearly states that target=”_blank” is invalid which isn’t true. It’s perfectly valid in both HTML5 and XHTML 1.0 Transitional. It’s only invalid in the strict DTD, but who uses that?
There’s no real reason not to use the target attribute, every browser supports it and will support it for the foreseeable future. And besides, why use JavaScript for something that the browser can do natively?

any benefit/downside to using html instead of JS or vice versa?

This sort of thing should br strongly discouraged. Only ever should a website had a teeny tiny sprinkle of target=»_blank» atop its icing. It is entirely the user’s choice as to whether they want another tab/window opened or not. It doesn’t matter if some users don’t know how to click with the middle-button; who are we to force new tabs upon those who do know how to open links in new tabs for the sake of the few ignorant users out there.

I’ve come across quite a few websites where links open in new tabs when they just shouldn’t and it’s frustrating, because I wanted the link to open in the current tab.

Leave target=»blank» alone unless you absolutely need it.

Perfect! exactly what i’m looking for. thanks 🙂

There actually IS a need for links to open in a new windows… sometimes. I am designing and coding a site which collects data from users which requires them to upload files (images and pdf documents). The overall process involves employees filling out a form and then uploading receipt scans/images for reimbursement. This needs to be viewed by an admin intranet site within the office. I have a nice page displaying the claim in a cute form, easily printable if required, and links to the relevant file uploads.

I don’t want those links to take over the parent window. They are additional info to the data displayed in the parent window, so they are required to open in a new window or tab (based on browser preference settings) while leaving the parent windows alone. Frequently both windows will be examined and compared together. Hard to do if only one is open at a time!

And no, our accounts team are not IT knowledgeable enough to recognise how/when to choose to open a link in a new windows. They expect it done for them. And quite rightly so too.

Having said that, this is a rare case and I would not normally utilise this in any other way or for any other reason. It bothers me that using target=”_blank” is not acceptable in strict html5 mode. I always code my html/css/php to perfect strict acceptance levels. Well…. I did until now. This is the exception. :/

jQuery Get Started

Adding jQuery to Your Web Pages

There are several ways to start using jQuery on your web site. You can:

• Download the jQuery library from jQuery.com
• Include jQuery from a CDN, like Google

Downloading jQuery

There are two versions of jQuery available for downloading:

• Production version — this is for your live website because it has been minified and compressed
• Development version — this is for testing and development (uncompressed and readable code)

Both versions can be downloaded from jQuery.com.

The jQuery library is a single JavaScript file, and you reference it with the HTML

Tip: Place the downloaded file in the same directory as the pages where you wish to use it.

jQuery CDN

If you don’t want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

Google is an example of someone who host jQuery:

Google CDN:

One big advantage of using the hosted jQuery from Google:

Many users already have downloaded jQuery from Google when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.