嗅探js css 文件是否加载成功示例
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="pragram" content="no-cache"/> <meta http-equiv="cache-control" content="no-cache,must-revalidate"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>嗅探demo</title> <!-- <style type="text/css"> #link1 { font-size: 1111px;假装有 } </style> --> <script> // 嗅探之后的调用方法 window.userId = '123456'; var marurls = []; var cssUrls = []; var imageUrls = []; var imageTargets = []; //发送埋点的 var sendMar = function(url, status) { if (marurls.indexOf(url) == -1) { marurls.push(url); setTimeout(function() { var mar = $('<a href="javascript:;" mars_sead="' + status + '_' + url.replace(/\//g, '_') + '__' + window.userId + '">'); $('body').append(mar); mar[0].click(); }, 0); } }; //加载js的 var loadJs = function(url, status) { var body= document.getElementsByTagName('body')[0]; var script= document.createElement('script'); script.type = 'text/javascript'; script.onload= function(event){ } script.onerror = function(e, msg) { } script.src= url; body.appendChild(script); }; //加载css的 var loadCss = function(url, status) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = url; link.rel = 'stylesheet'; link.type = 'text/css'; link.onload= function(event){ } link.onerror = function(e, msg) { } head.appendChild(link); }; //加载image var loadImage = function(target, url) { sendMar(target.src, 505); target.src = url; }; //延后处理css埋点触发 var pushCss = function(url) { if (cssUrls.indexOf(url) == -1) { cssUrls.push(url); } } var pushImage = function(event, url) { if (imageUrls.indexOf(url) == -1) { imageUrls.push(url); imageTargets.push(event.target); } } </script> <link rel="stylesheet" type="text/css" href="http://localhost/html/lib/test.css" onerror="pushCss('http://localhost/html/lib/test123.css')"/> <input type="hidden" id="link1"> </head> <body> <section id="test">嗅探demo</section> <img src="http://localhost/html/lib/test123.jpg" style="width: 200px;" onerror="pushImage(event, 'http://localhost/html/lib/test.jpg')"> </body> </html> <script src="http://my/js/public/jquery-1.10.2.js?12017011001" charset="utf-8"></script> <script src="http://my/mars_wap/mars_wap.js" charset="utf-8"></script> <!-- js例子 --> <script src="http://localhost/html/lib/test.js" onerror="sendMar('http://localhost/html/lib/test123.js', '505')" charset="utf-8"></script> <script> // 嗅探示例 window.version 可以是 window.$ 、window.angularjs 或任意自己定义的全局变量 用于检测cdn返回的文件中是否包含应有的逻辑 if (!window.test1) { // 根据url只会发送一次埋点信息 sendMar('http://localhost/html/lib/test123.js', 510); loadJs('http://localhost/html/lib/test.js'); } </script> <!-- js例子 --> <!-- css例子 --> <script> // 嗅探示例 window.version 可以是 window.$ 、window.angularjs 或任意自己定义的全局变量 用于检测cdn返回的文件中是否包含应有的逻辑 if (window.getComputedStyle(document.getElementById('link1')).fontSize != '1111px') { if (cssUrls.indexOf('http://localhost/html/lib/test123.css')!=-1) { sendMar('http://localhost/html/lib/test123.css', 505); } // 根据url只会发送一次埋点信息 sendMar('http://localhost/html/lib/test123.css', 510); loadCss('http://localhost/html/lib/test.css'); } </script> <!-- css例子 --> <!-- image例子 --> <script> // 嗅探示例 window.version 可以是 window.$ 、window.angularjs 或任意自己定义的全局变量 用于检测cdn返回的文件中是否包含应有的逻辑 var imageLength = imageUrls.length; if (imageLength) { for (var i = 0; i < imageLength; i++) { loadImage(imageTargets[i], imageUrls[i]); } } </script> <!-- image例子 -->
总结来说就是:
js嗅探:1.对script标签添加onerror方法(只是在非200情况生效);2.200情况,在目标js的script标签后,监听特有字段,无该字段就说明cdn错误,在动态加载一遍非cdn的js。
css嗅探:1.对link标签添加onerror方法(只是在非200情况生效);2.200情况,在目标文档最后,判断目标js添加的特有属性,无该字段就说明cdn错误。
image嗅探: 1.image嗅探:1.对image标签添加onerror方法(只是在非200情况生效);2.200情况,判断image大小。