Automatic external links and rel="noopener"

[Hans]

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.

[Ruud]

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"
});

[Hans]

Great, thanks Ruud!

[Manuela]

only a test...