Author Topic: Automatic external links and rel="noopener"  (Read 98 times)

Offline Hans

  • Posts: 881
Automatic external links and rel="noopener"
« on: May 14, 2017, 08:54:47 PM »
Hello,
unless my client doesn't want that "feature" I always place this code in my templates to force external links to open in a new tab.
Code: [Select]

<script type="text/javascript">
$(document).ready(function () {
$("a").filter(function () {
return this.hostname && this.hostname !== location.hostname;
}).addClass('external').attr("target", "_blank");
});
</script>

Now I have read that there might be safety issues and negative impact on quick rendering of a page.

To avoid those it's advisable to add
Code: [Select]
rel="noopener" to the link.

I don't know however how to change the code so that
Code: [Select]
rel="noopener" is part of the resulting link.

Hope someone can help me, I'm no coder.

Hans - Nijmegen - The Netherlands

Offline Ruud

  • Posts: 3482
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Automatic external links and rel="noopener"
« Reply #1 on: May 14, 2017, 10:37:08 PM »
The jQuery function attr() also allows objects/arrays to be processed.

You can change the part:
Code: [Select]
.addClass('external').attr("target", "_blank");
into:
Code: [Select]
.addClass('external').attr({
    target : "_blank" ,
    rel : "noopener"
});

Offline Hans

  • Posts: 881
Re: Automatic external links and rel="noopener"
« Reply #2 on: May 15, 2017, 01:16:37 PM »
Great, thanks Ruud!
Hans - Nijmegen - The Netherlands