JavaScript实践（一）页面添加水印

var _water = {}
_water.name = 'zhoulixue'
_water.genWater = function(name) {
  var waterCanvas = document.createElement('canvas')
  waterCanvas.id = 'water-canvas'
  waterCanvas.setAttribute('width', name.length * 12)
  waterCanvas.setAttribute('height', 80)
  var ctx = waterCanvas.getContext('2d')
  ctx.rotate(Math.PI / 180 * 30)
  ctx.font = '15px serif'
  ctx.fillText(name, 10, 10)
  var base64Url = waterCanvas.toDataURL()

  var waterMarkDiv = document.createElement('div')
  var styleStr = 'position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;pointer-events:none;background-image:url(' + base64Url + ');opacity: 1;'
  waterMarkDiv.setAttribute('style', styleStr)
  waterMarkDiv.classList.add('__wm')
  return waterMarkDiv
}
_water.container = document.body
_water.waterMarkDiv = _water.genWater(_water.name)

_water.container.insertBefore(_water.waterMarkDiv, _water.container.firstChild)

_water.callback = function(record, mutation) {
  for (var index = 0; index < record.length; index++) {
    var item = record[index]
    var target = item.target
    if (target.nodeType === 1) {
      // 删除时新增
      var removedNodes = item.removedNodes
      if (target.nodeName === 'BODY' && removedNodes.length > 0) {
        for (let index = 0; index < removedNodes.length; index++) {
          const element = removedNodes[index]
          if (element.nodeType === 1 && element.nodeName === 'DIV' && element.classList.contains('__wm')) {
            _water.waterMarkDiv = _water.genWater(_water.name)
            _water.container.insertBefore(_water.waterMarkDiv, _water.container.firstChild)
          }
        }
      }
      // 修改属性时直接删除
      var type = item.type
      if (target.nodeName === 'DIV' && target.classList.contains('__wm') && type === 'attributes') {
        _water.container.removeChild(_water.waterMarkDiv)
      }
    }
  }
}

if (typeof MutationObserver === 'function') {
  _water.obs = new MutationObserver(_water.callback)
  _water.options = {
    childList: true,
    attributes: true,
    subtree: true,
    characterData: true
  }
  _water.obs.observe(_water.container, _water.options)
}