監控動態創建的script標簽

ARGUS 發布于2019-08-19 18:08 / 1712人閱讀

摘要：動態創建標簽很常用，比如等等技術都會用到，有時候我們會希望能夠監控和攔截動態創建的標簽。下面提供了一種代理的方法來監控。上面的代碼加載完后，就可以監控到或者兩種方式加載的了原文

動態創建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/

云服務器 GPU云服務器動態加載script html創建隱藏標簽 js如何創建一個標簽 js同時創建多個標簽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79237.html

如何優雅處理前端的異常？

摘要：二需要處理哪些異常對于前端來說，我們可做的異常捕獲還真不少。總結一下，大概如下語法錯誤代碼異常請求異常靜態資源加載異常異常異常跨域崩潰和卡頓下面我會針對每種具體情況來說明如何處理這些異常。前端一直是距離用戶最近的一層，隨著產品的日益完善，我們會更加注重用戶體驗，而前端異常卻如鯁在喉，甚是煩人。一、為什么要處理異常？異常是不可控的，會影響最終的呈現結果，但是我們有充分的理由去做這樣的事...

zoomdong 2019-08-02 16:10 評論0 收藏0
讀書筆記(04) - 錯誤監控 - JavaScript高級程序設計

摘要：項目中我們可通過設置采集率，或對規定時間內數據匯總再上報，減少請求數量，從而緩解服務端壓力。借鑒別人的一個例子只采集上報錯誤參考文檔高級程序設計如何優雅處理前端異常作者以樂之名本文原創，有不當的地方歡迎指出。 showImg(https://segmentfault.com/img/bVbnuud?w=640&h=640); 錯誤類型即時運行錯誤 (代碼錯誤) 資源加載錯誤常見...

Null 2019-08-23 13:55 評論0 收藏0
在單頁應用中，如何優雅的上報前端性能數據

摘要：本文的介紹的是如何設計一個通用的可以以較小的侵入性，自動上報前端的性能數據。具體的做法可以看我的上一篇文章在單頁應用中，如何優雅的監聽的變化。三如何上報性能數據那么如何上報性能數據呢，我們第一反應就是通過請求的形式來上報前端性能數據。 ??最近在做一個較為通用的前端性能監控平臺，區別于前端異常監控，前端的性能監控主要需要上報和展示的是前端的性能數據，包括首頁渲染時間、每個頁面的白屏時...

KitorinZero 2019-08-30 15:55 評論0 收藏0
在單頁應用中，如何優雅的上報前端性能數據

摘要：本文的介紹的是如何設計一個通用的可以以較小的侵入性，自動上報前端的性能數據。具體的做法可以看我的上一篇文章在單頁應用中，如何優雅的監聽的變化。三如何上報性能數據那么如何上報性能數據呢，我們第一反應就是通過請求的形式來上報前端性能數據。 ??最近在做一個較為通用的前端性能監控平臺，區別于前端異常監控，前端的性能監控主要需要上報和展示的是前端的性能數據，包括首頁渲染時間、每個頁面的白屏時...

curried 2019-08-02 14:07 評論0 收藏0