WebsiteBaker Community Forum

General Community => Off-Topic => Topic started by: Hans on May 14, 2017, 08:54:47 PM

Title: Automatic external links and rel="noopener"
Post by: Hans 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.

Title: Re: Automatic external links and rel="noopener"
Post by: Ruud 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"
});

Title: Re: Automatic external links and rel="noopener"
Post by: Hans on May 15, 2017, 01:16:37 PM

Great, thanks Ruud!

Title: Re: Automatic external links and rel="noopener"
Post by: Manuela on June 04, 2017, 03:48:22 PM

only a test...