Making external links open in a new window in wagtail

I recently implemented adding target=»_blank» to external links like this:

Beautiful soup messes with the output, adding html, head & body tags — Don’t put html, head and body tags automatically, beautifulsoup

Hence my crappy » fix » manually replacing parts of the output with blank strings.

What is the correct and best way to do this?

2 Answers 2

Starting with Wagtail v2.5, there is an API to do customisations like this as part of Wagtail’s rich text processing: Rewrite handlers , with the register_rich_text_features hook.

Here is an example of using this new API to make a rewrite handler that sets a target=»_blank» attribute to all external links:

In this example I’m also adding rel=»noopener» to fix a known security issue with target=»_blank» .

Compared to previous solutions to this problem, this new approach is the most reliable: it’s completely server-side and only overrides how links are rendered on the site’s front-end rather than how they are stored, and only relies on documented APIs instead of internal ones / implementation details.

Have been struggling with the same problem and couldn’t achieve it using wagtailhooks. My initial solution was to manipulate the content in base.html, using a filter. The filter to cut pieces of code works perfectly when placed in the content block, example:

Above filter deletes parts of the content, but unfortunately ‘replace’ is not available as a filter (I´m using Python 3.x). Therefor my next approach was building a custom_filter to create ´replace´ as filter option. Long story short: It partly worked but only if the content was converted from the original ‘StreamValue’ datatype to ‘string’. This conversion resulted in content with all html tags shown, so the replacement did not result in working html. I couldn´t get the content back to StreamValue again and no other Python datatype remedied the issue. Eventually JQuery got the job done for me:

How to open external links in a new tab/window by default?

In order to configure all external links to open in new tabs/windows automatically, i.e. to use the link target » _blank » from an HTML point of view, you have to add some JavaScript to your XWiki.

How you are generating your external links will dictate which of the two snippet options you choose.

XWiki Syntax
If you are only generating your external links via XWiki Syntax , you will use Option 1 on Step 4.

HTML Links
If you are writing any external links directly in HTML, either through the <> macro or in a Velocity .vm file, you have two options:

• Use Option 1 on Step 4 and manually wrap your links in an element with the wikiexternallink class.
  • Will not work: href= «https://www.xwiki.org» > XWiki
  • Will work: class= «wikiexternallink» >href= «https://www.xwiki.org» > XWiki
• No modifications need to be made to existing HTML. Instead, use Option 2 on Step 4.

Steps

Your user type should be advanced to be able to follow the steps. Go to «Profile Settings > Preferences > USER TYPE» for changing the user type to advanced.

1. Create a new page, or go to an existing page that won’t be removed.
2. Click Edit and select Objects.
3. In the Select a Class box, select JavaScriptExtension and click the Add button.

In the object that just appeared, enter one of the following snippets into the Code box (explained above):1. If you are using only XWiki Syntax for your external links:

Open link in new tab or window [duplicate]

Is it possible to open an a href link in a new tab instead of the same tab?

4 Answers 4

You should add the target=»_blank» and rel=»noopener noreferrer» in the anchor tag.

Adding rel=»noopener noreferrer» is not mandatory, but it’s a recommended security measure. More information can be found in the links below.

It shouldn’t be your call to decide whether the link should open in a new tab or a new window, since ultimately this choice should be done by the settings of the user’s browser. Some people like tabs; some like new windows.

Using _blank will tell the browser to use a new tab/window, depending on the user’s browser configuration and how they click on the link (e.g. middle click, Ctrl +click, or normal click).

set the target attribute of your element to «_tab»

EDIT: It works, however W3Schools says there is no such target attribute: http://www.w3schools.com/tags/att_a_target.asp

EDIT2: From what I’ve figured out from the comments. setting target to _blank will take you to a new tab or window (depending on your browser settings). Typing anything except one of the ones below will create a new tab group (I’m not sure how these work):

Mediawiki open external links in a new window

I want to enable opening external links in a new window function in Mediawiki. I tried to modify the «LocalSettings.php» file according to the below instructions:

But I still couldn’t get it working. When I looked up in the above link «Discussion» wiki page I found more informations which confused me. Any idea how to set this work in a simple and straightforward way?

2 Answers 2

I’m not sure if you want to open all external links in new windows (tabs) or only select links.

If it’s the latter, then you can try our new window links extension. Not necessarily pretty, but will work if you only need a few links.

Now, if you want all external links to open up in new windows, you need to use the LinkerMakeExternalLink hook and modify the $attribs parameter to your liking.

If you want a few specific links to open in a new window: You can use the LinkTarget extension. You can then surround the appropriate links with an HTML element with a class of your choosing and get the extension to handle them.

(tor’s answer also had a relevant extension linked, but Wikia removed that extension and it probably will not be maintained).

If you want all external links to open in a new window: MediaWiki already has a setting for it: $wgExternalLinkTarget. Just add the following to your LocalSettings.php file:

Do keep in mind that some internal links might not be identified as such, and therefore will open in a new window; one such example is an internal edit link created by using

Open External Links In New Window

You can do this straight with HTML, but that is invalid markup, this takes care of business without invalid code and unnecessary markup.

Or, you can still avoid the validation problems and just append the class target=_blank thing to any links with href attributes starting with http://. The example below only targets links in a #content area. Scoping down like that might be a good idea in case your menus are dynamic and create full URLs.

Also note that there are a wide variety of different ways to only target external links.

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

A slightly different version if you only want to target specific URLs (I use the rel tag “external”):

$(‘A[rel=»external»]’)
.click( function() <
window.open( $(this).attr(‘href’) );
return false;
>);

Nice snippet Paul, that’s much better, and beautifully unobtrusive and validates in XHTML 1 strict. It’s about time the world stops using obtrusive javascript.

Thank you, Paul! This came in handy.

Very useful technique. Thanks you so much

Here is something that I believe will add a great value. I just tried to ignore any links that belongs to the site and identify the external links straightforward.

Is there a way to resize the window that pops up as well?

This is awesome. Just what I needed for a client’s website. And thanks Paul, that works wonderful.

Here is a snippet we’re using that works similar to Paul’s and adds support for target “_blank”, “parent”, “top” and “popup”

If code is garbled, grab it here: http://www.id3.co.th/js/lib.js (look for “links and popups”)

You then activate it in your pages by adding externallinks(); in your $(document).ready(function()<

If code is garbled, check the source of http://www.id3.co.th/ (look for “.ready(function”)

Hope this helps!

window.onload = externallinks; for nojquery situation

If you have a good reason for opening certain links in a new window and want to use plain HTML you could just switch to the HTML5 doctype.

It’s the little things in life! Small code, huge solution!

target=”_blank” and just forget about xhtml strict, that is dead by the way.
Everyone is talking about HTML5 now.. why do you waste your time with thes insignificant problems?

I agree with you, why bothering with scripts when we already have target”_blank”, moreover it also works for people with js is disabled! Maybe this isnt a concern anymore?

Because, even in 2010, people still don’t understand the role of validation. It’s a tool, not an achievement. Remember the compliance badge craze!?

if you’re using jquery, you should use delagate. that way, you create 1 event binding on the body element, instead of hundreds, one on each link.

code would look something like
$(‘body’).delegate(“a”,”click”,function() <
var a = new RegExp(‘/’ + window.location.host + ‘/’);
if(!a.test(this.href)) <
event.preventDefault();
event.stopPropagation();
window.open(this.href, ‘_blank’);
>
>);

Technically it’s a nice solution.

On the other hand it might tempt designers to use it whenever they can. NEVER open up a new window unless it is absolutely necessary or is a 100% user-friendly. Having all external links open up in a new window is neither.

For MooTools it’s very similar:

Good one. I think, this post describes good about it and a perfect solution too.

Can i have any code to popup an iframe content dynamically……..

@nachomaans
How can I have copied the code you given to section .But I am not sure If I follow this line:You then activate it in your pages by adding externallinks(); in your $(document).ready(function()<

Where can I use it?

BTW I tried it in my wordpress blog

I think my comment comes quite late with respect to this post but I have written a small jQuery plugin for the same based on knowledge gain my this post and my readings about jQuery plugin development in the last week or so. Please find the link to the plugin and associated post hope its upto the jQuery plugin development standards.

Regards,
Bilal Awan

A small optimization: since the RegExp doesn’t change , move it outside the loop so it is only defined (and compiled) once. No sense in redefining it on each loop occurrence.

Also, it’s worth noting that this only works if all internal links have a full absolute path. Since it compares it to the host name, each link must contain the host name. Relative links in the form /link/to/something or link/to/something will be treated as external links.

I forgot the dollar sign in my code snippet! Here is the correct code:

How to use this code?

I’m know nothing about jQuery, i just paste that code in HTML head, and i get this error in Chrome web inspector:

el Abee.. you have to first include the actual jQuery library and then, make sure the actual code you paste in is within tags and that those two tags are within the tags. And by the way, including jQuery needs to be done between the head tags too:

sir i have a problem that there are thumbnails in my page when a user clicks it i want to open the larger image of that thumbnail in a div new window tab

Excelente tip, gracias

Here is what we do:

and in the jQuery file we use:

I tried every variation I possibly could of using $(‘a[rel=”external”]) I could think of. I used double quotes, single quotes, tried using [rel^=”external”] in an attempt to just make the thing look for a link that begins with, I copied and pasted the code instead of typing it out. I made sure that arbitrary jQuery code would work in this scripts place. I made sure that my WordPress enqueue_script was working properly. I tried similar scripts from other websites. I’ve Googled til my fingers bled…

…and still nothing that involves using [rel=””] works for me. I’m using the latest jQuery library from the jQuery CDN (1.7.1 minified @ the time I’m writing this comment). Am I missing something? Does this version of jQuery not pick up on [rel=””]?

If I take the [rel=”external”] out, it works, but for every link (which is to be expected since there’s no conditional). I wrote something else that works that’s a derivative, but the [rel=”external”] just seems so much more elegant and I’d rather use that.

Here’s my script:

Just noticed one thing about the first line in my comment above. $(‘a[rel=”external”]) should be $(‘a[rel=”external”]’).

Any ideas on why this is happening? 🙁

Sorry, I could be wrong, but the examples shown here do not work if the attribute with the “external” there is some attribute, such as, “nofollow” or “author”. I used to blog a little bit different code, taken from the plugin:

Tried them all and couldn’t get them to work either…. that is till I tried the code from Konstantin, worked perfect and loaded super fast! Thank you thank you thank you…. saved much time and effort. Question: is it valid? Was usuing simple javascript before but was slow and clunky….(below).

Thanks again Konstantin.

This works great, but the code does interfere with some Google Analytics features. For instance, we lost all of our outbound link tracking when using this.