嗅探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大小。
嗅探js css 文件是否加载成功示例的更多相关文章
- nginx设置反向代理后，页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
- nginx反向代理转发后页面上的js css文件无法加载【原创】
故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...
- nginx设置反向代理后端jenklins，页面上的js css文件无法加载
转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...
- 常用js，css文件统一加载方法，并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...
- js文件 与 css文件 异步加载
使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...
- 史无前例的Firefox奇怪问题：host中的common名称造成css文件无法加载
今天遭遇了一个非常非常奇怪的问题,一个css文件(common.cnblogs.com/Skins/marvin3/green.css),Firefox怎么也无法打开,一直在转圈. 而换成其它浏览器都 ...
- apache模块 合并多个js/css 提高网页加载速度
win : http://blog.csdn.net/mycwq/article/details/9361117 linux :http://blog.csdn.net/mycwq/article/ ...
- js判断图片是否加载成功
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 判断css文件是否加载完成
function cssReady(fn, link) { var d = document, t = d.createStyleSheet, r = t ? 'rules' : 'cssRules' ...
随机推荐
- 从ICassFactory为CLSID为{17BCA6E8-A950-497E-B2F9-AF6AA475916F}的COM组件创建实例失败，原因是出现以下错误：c001f011.(Microsoft.Server.manageDTS
从ICassFactory为CLSID为{17BCA6E8-A950-497E-B2F9-AF6AA475916F}的COM组件创建实例失败,原因是出现以下错误:c001f011.(Microsoft ...
- ONLY三行脚本 SQL数据恢复到指定时间点
经常看到有人误删数据,或者误操作,特别是Update和Delete的时候没有加WHERE ... 然后就喊爹喊娘了,怕是亲爹妈也无奈摇肩. 话说,如果没有犯过错误,那你还算是程序猿(媛)麽?!没了偶尔 ...
- oracle表空间表分区详解及oracle表分区查询使用方法(转+整理)
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- 回溯法、数独与N阶可达问题
回溯法是剪了枝的穷举,这是字面上的说法,不太好理解,不如讲解实例来的酸爽,于是引出了N阶可达问题: 有N个国家,每个国家有若干城市,小明要从中国(任意一个城市)出发,遍历所有国家(假设这个遍历顺序已经 ...
- 双色球机选算法java实现
双色球机选算法java实现 一.代码 package com.hdwang; import java.util.Random; /** * Created by admin on 2017/1/10. ...
- 将bat文件或exe程序注册成windows服务
命令行使用sc命令.关于sc命令的详解,请自行查看帮助(sc /?),在此只简单提及如何加入系统服务功能.加入服务:sc create ServiceName binPath= 路径 start= a ...
- Maven之（九）依赖关系
在maven的管理体系中,各个项目组成了一个复杂的关系网,但是每个项目都是平等的,是个没有贵贱高低,众生平等的世界,全球每个项目从理论上来说都可以相互依赖.就是说,你跟开发spring的大牛们平起平坐 ...
- 使用signalR创建聊天室。
浏览器支持Html5的情况下,SignalR使用WebSockets,当不支持时SignalR将使用其它技术来实现通讯. 界面如下:左侧包含三种聊天对象,不同的聊天对象会创建不同的对话框. 设计思路参 ...
- HDU 4403 A very hard Aoshu problem(DFS)
A very hard Aoshu problem Problem Description Aoshu is very popular among primary school students. I ...
- 面向对象---final关键字
final 在java中表示的意思是最终,也称为完结器,可以用final关键字声明类.属性.方法,在声明时需要注意以下几点: 1.使用final声明的类不能有子类. 2.使用final声明的方法不能被 ...