<!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 文件是否加载成功示例的更多相关文章

  1. nginx设置反向代理后，页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  2. nginx反向代理转发后页面上的js css文件无法加载【原创】

    故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...

  3. nginx设置反向代理后端jenklins，页面上的js css文件无法加载

    转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...

  4. 常用js，css文件统一加载方法，并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  5. js文件 与 css文件 异步加载

    使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...

  6. 史无前例的Firefox奇怪问题：host中的common名称造成css文件无法加载

    今天遭遇了一个非常非常奇怪的问题,一个css文件(common.cnblogs.com/Skins/marvin3/green.css),Firefox怎么也无法打开,一直在转圈. 而换成其它浏览器都 ...

  7. apache模块 合并多个js/css 提高网页加载速度

    win :  http://blog.csdn.net/mycwq/article/details/9361117 linux :http://blog.csdn.net/mycwq/article/ ...

  8. js判断图片是否加载成功

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 判断css文件是否加载完成

    function cssReady(fn, link) { var d = document, t = d.createStyleSheet, r = t ? 'rules' : 'cssRules' ...

随机推荐

  1. 登录验证全局控制的几种方式（session）

    在登陆验证或者其他需要用到session全局变量的时候,归结起来,主要有以下三种较方便的实现方式.(其中个人较喜欢使用第一种实现方法) 一,在一个公共类里创建一个公共方法,然后需要验证的页面都调用这个 ...

  2. mysqldump备份错误：诡异的#mysql50#.mozilla数据库

    今天测试mysql自动备份功能 在red_hat_linux5系统下安装了mysql_5.5 系统提示执行脚本抛错, 手动执行脚本, 返回错误:mysqldump: Got error: 1102: ...

  3. git shell 常用命令

    git branch 查看本地所有分支 git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支 git branch -r 查看远程所有分支 git ...

  4. SSM整合案例（Spring+Struts+Mybatis）

    项目目录结构 第一步:创建数据库和数据表 CREATE DATABASE IF NOT EXISTS mybatis; USE mybatis; CREATE TABLE t_user ( ) NOT ...

  5. SVN不同图标的不同意义

    黄色感叹号(有冲突):--这是有冲突了,冲突就是说你对某个文件进行了修改,别人也对这个文件进行了修改,别人抢在你提交之前先提交了,这时你再提交就会被提示发生冲突,而不允许你提交,防止你的提交覆盖了别人 ...

  6. testlink用例转换小工具（excel转为xml，python版）

    前面文章记录了testlink的安装方法(CentOS 7下安装xampp和testlink),由于testlink仅支持xml格式的用例导入,研究了下excel转xml的方法, 从网上其他网友那里借 ...

  7. python数据类型以及模块的含义

    print(sys.path) #打印环境变量 print(sys.argv) #打印相对路径 print(sys.argv[1]) #打印对应的参数 1.在python最上有时候会导入os模块,表示 ...

  8. 你确实应该学习并使用的 10 个 C# 特性

    1) async / await 使用 async / await 模式,可以在执行代码块操作的时候不会阻塞 UI 或者当前的线程.即使该操作被某些执行动作延迟了(比如一个 web 请求),async ...

  9. java的return区别

    return ;和return null的区别在于:前者当方法返回值为void时候,return ; 跳出方法. 后者当方法的返回值为object对象时,return null,跳出方法,返回值为空值 ...

  10. shell 字符串包含

    转自:Shell判断字符串包含关系的几种方法 现在每次分析网站日志的时候都需要判断百度蜘蛛是不是真实的蜘蛛,nslookup之后需要判断结果中是否包含"baidu"字符串 以下给出 ...