From jQuery to Vanilla JavaScript
No disrespect to jQuery, a phenomenal and lasting tool, but I saw fit to extirpate it from my blog’s code. I set about untying it from the underpins until coming to the last remaining use case, simply opening external links in their own window/tab. The problem was recreating the ready()
function to know when page content has finished loading, without requiring all the machinery of jQuery.
Existing jQuery snippet:
jQuery(function ($) {
//Change target attribute of external links
var domain_root = document.location.protocol + '//' + document.location.host;
var all_links = $('a').each(function (index, element) {
if (element.href.substr(0, domain_root.length) !== domain_root) {
element.target = '_blank';
}
});
});
Replaced by Vanilla JavaScript snippet:
var domReady = function(callback) {
document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
};
domReady(function() {
var links = document.links;
for (var i = 0; i < links.length; i++) {
if (links[i].hostname != window.location.hostname) {
links[i].target = '_blank';
}
}
});
Now using domReady()
as vanilla JS analogue to jQuery’s ready()
function.
Shout out to beeker.io for providing a complete solution!