Tiny Barba.js-esque push-state static page transitioner

push-state-static.js

// "wait for ready or just run immediately" function
import ready from 'ready'
// https://stackoverflow.com/a/21210643
import queryMap from 'query-map'

const transitionQueryParam = '__dynamic'

ready(() => {
  if(queryMap[transitionQueryParam] === '1')
    return

  const main = document.querySelector('main')

  const iframe = document.createElement('IFRAME')
  iframe.style.visibility = 'none'
  iframe.style.zIndex = '-1000'
  iframe.style.position = 'fixed'
  iframe.style.top = '-99999px'
  iframe.style.left = '-99999px'
  document.body.appendChild(iframe)

  document.addEventListener('click', (e) => {
    const link = e.target
    if(link.tagName !== 'A')
      return
    if(typeof link.dataset.transition === 'undefined')
      return

    e.preventDefault()

    iframe.src = link.href + `?${transitionQueryParam}=1`
  })

  iframe.onload = () => {
    if(iframe.src === 'about:blank')
      return

    const idocument = iframe.contentWindow.document
    const imainHTML = idocument.querySelector('main').innerHTML
    window.history.pushState(imainHTML, idocument.title, iframe.src)
    main.innerHTML = imainHTML

    iframe.src = 'about:blank'
  }
  window.addEventListener('popstate', (e) => main.innerHTML = e.state)
})