fetch content on hover, populate on click.

hoverfetch.js

var linkContents = {};

document.addEventListener('mouseover', function(event) {
  var url = event.srcElement.href;

  if (event.srcElement.nodeName !== 'A') return
  else if (url.indexOf(location.href) === -1) return
  else if (linkContents[url]) return
  else fetchContent(url)

})

document.addEventListener('click', function(event) {
  var url = event.srcElement.href;

  event.preventDefault();
  event.stopPropagation();

  if (event.srcElement.nodeName !== 'A') return
  else if (url.indexOf(location.href) >= 0) updateContent(url)

})

function updateContent(url) {
  document.write(linkContents[url])
  history.pushState({}, document.title, url.split('/').slice(-2)[0]);
}

function fetchContent(url) {
  var xhr = new XMLHttpRequest()

  linkContents[url] = true

  xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
      linkContents[url] = xhr.responseText
    }
  }
  xhr.open('GET', url, true);
  xhr.send(null);
}