Remote URL Opener (JavaScript Class)

The idea for this JavaScript class comes from my experience with Iconduck. Specifically, that site has a ton of outbound links to icon and illustration creators.

One thing I wanted to do is have all 3rd-party outbound links open in a new window, and include some URL params so that the creator of that site might be able to see where traffic was coming from.

In essense, I wanted a simple class to convert:

<a href="https://example.com/">Iconduck</a>

into:

<a href="https://example.com/?ref=iconduck.com" target="_blank">Iconduck</a>

By building this into a JavaScript class, I'm able to automate this process and have the code take into consideration the current host.

When it finds a link that is pointing to a 3rd-party host, it'll jump in and make the needed changes.

It's been open sourced, and is available on GitHub.

---

Sample Links (try clicking)

• Cloudinary
• Typesense
• Figma
• Canva
• Cloudflare
• GitHub

---

Implementation Code

RemoteURLOpener.init();
RemoteURLOpener.setRef('onassar.github.io');

---

Extras

• mailto: links are detected, and won't be modified
• The class actually change the markup. It adds a click event listener to relevant HTMLElements
• The config property contains an ignoreClassNames array, which can be used to prevent behaviour on specific elements on the page.
• The config property contains an invalidProtocols array, which can be used to prevent behaviour on specific protocols (eg. the reserved chrome HTTP protocol).

When it finds a link that is pointing to a 3rd-party host, it'll jump in and make the needed changes.

Enjoy :)

---

References

• GitHub code