General Community > Off-Topic

Automatic external links and rel="noopener"

(1/1)

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

--- End code ---

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: ---rel="noopener"
--- End code ---
to the link.

I don't know however how to change the code so that
--- Code: ---rel="noopener"
--- End code ---
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: ---.addClass('external').attr("target", "_blank");
--- End code ---

into:

--- Code: ---.addClass('external').attr({
    target : "_blank" ,
    rel : "noopener"
});
--- End code ---

Hans:
Great, thanks Ruud!

Manuela:
only a test...

Navigation

[0] Message Index