嗅探js css 文件是否加载成功示例

最新推荐文章于 2024-03-01 21:12:37 发布

anmei1936

最新推荐文章于 2024-03-01 21:12:37 发布

阅读量160

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/great-code/p/6274983.html

版权

<!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大小。

转载于:https://www.cnblogs.com/great-code/p/6274983.html

anmei1936

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
嗅探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"/>&...
复制链接

扫一扫