監控動態建立的script標籤

動態建立script標籤很經常使用，好比jsonp、amd 等等技術都會用到， 有時候咱們會但願可以監控和攔截動態建立的script標籤。
下面提供了一種代理document.createElement的方法來監控。

var _createElement = document.createElement
var __define_src = function(script){
  var src
  Object.defineProperty(script,'src',{
    get : function(){
      return src
    },
    set : function(s){
      src = s
      script.setAttribute('src',s)
    }
  })

  var _setAttribute = script.setAttribute
  script.setAttribute = function(){
    var args = Array.prototype.slice.call(arguments)
    if(args[0] === 'src'){
      //do something here
      console.log('setAttribute',args[1])
    }
    _setAttribute.apply(script,args)
  }
}

document.createElement = function(tagName){
  var dom
  dom = _createElement.call(document,tagName)
  if(tagName.toLowerCase() === 'script'){
    __define_src(dom)
  }
  return dom
}

上面的代碼加載完後，就能夠監控到 script.src 或者 script.setAttribute 兩種方式加載的JS了

var script = document.createElement('script')
script.src = 'http://s11.cnzz.com/z_stat.php?id=1256295486&web_id=1256295486'
script.setAttribute('src','https://s11.cnzz.com/z_stat.php?id=1256295486&web_id=1256295486')

原文 https://friskfly.github.io/2016/04/12/%E7%9B%91%E6%8E%A7%E5%8A%A8%E6%80%81%E5%88%9B%E5%BB%BA%E7%9A%84script%E6%A0%87%E7%AD%BE/