另一种骚操作的定时器

HTML meta标签大家都比较熟了。

其中http-equiv属性，可以用来
设置过期时间、提供网站关键词等用于SEO、设置字符集、等等。

等等。今天要记录的一个是用来刷新网站的refresh属性。

既然可以定时刷了，那么我就可以用他来代替定时器，主页面创建一个iframe，子页面定时刷新，然后通过postMessage传递到主页面。

闲话不多说，代码如下：

let sao = (() => {
  let timers = {}
  let i = 0

  function _guid() {
    return (+new Date()).toString(36) + (i++)
  }

  function _clear(id) {
    if (timers[id]) {
      window.removeEventListener('message', timers[id].cb)
      timers[id].ifr.parentNode && timers[id].ifr.parentNode.removeChild(timers[id].ifr)
      delete timers[id]
    }
  }

  function _set(callback, millisec) {
    let id = _guid()
    // 应该肯定不会重复
    if (timers[id]) {
      _clear(id)
    }
    let ifr = document.createElement('iframe')
    ifr.style.display = 'none'
    timers[id] = {
      ifr: ifr,
      cb(e) {
        if (e.data === 'refresh') {
          callback()
        }
      }
    }
    window.addEventListener('message', timers[id].cb, false);
    ifr.src = `data:text/html,
    
      
      
        
        
      
      
          
      
      
    `
    // 转个码更好
    // ifr.src = 'data:text/html,%3C%21DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%09%3Cmeta%20charset%3D%22utf-8%22%20%2F%3E%0A%09%3Cmeta%20http-equiv%3D%22refresh%22%20content%3D%22' + Math.ceil(millisec / 1000) + '%22%20id%3D%22metarefresh%22%20%2F%3E%0A%09%3Ctitle%3Ex%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%09%3Cscript%3Etop.postMessage%28%27refresh%27%2C%20%27%2A%27%29%3B%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E'
    document.body.insertBefore(ifr, document.body.childNodes[0])
    return id
  }

  return {
    setInterval: _set,
    clearInterval: _clear
  }
})()


// 使用
let i = 0;
sao.setInterval(function() {
  document.querySelector('p').innerHTML = ++i;
}, 1000)```