One external link element.
New tab desktop. Same tab mobile.
Mobile browers aren't great and opening external links in a new tab makes for a bad UX. So, this code makes external links open in a new tab desktop, but the same tab on tablet and mobile - the best of both worlds for the UX.
<script>
document.addEventListener("DOMContentLoaded", function () {
const links = document.querySelectorAll("a");
const currentDomain = window.location.hostname;
// Function to detect if the device is mobile
function isMobileDevice() {
return /Mobi|Android/i.test(navigator.userAgent);
}
links.forEach((link) => {
const linkHref = link.getAttribute("href");
const linkDomain = new URL(link.href).hostname;
// Skip processing for tel and mailto links
if (linkHref.startsWith("tel:") || linkHref.startsWith("mailto:")) {
return;
}
// If links hostname is differnet to currnet hostname, force open in same tab on mobile
if (linkDomain !== currentDomain) {
if (isMobileDevice()) {
// Open in the same tab on mobile devices
link.setAttribute("target", "_self");
} else {
// Open in a new tab on desktop devices
link.setAttribute("target", "_blank");
}
}
});
});
</script>
Tagline
Medium length section heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.