动态写入 Script 和 Image
一、动态写入JS
一个小技巧，可动态写入 JS 代码，变通的方法还有很多。
适用于对页面进行按需加载或者极端Hack的场合，或者添加第三方的监测代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
<!--var js132 = '<script type="text/javascript" src="http://www1.pconline.com.cn/api/libs/jquery/jquery-1.3.2.min.js" charset="utf-8"></script>';-->
// document.write(js132);
var js172 = '<script type="text/javascript" src="http://www1.pconline.com.cn/api/libs/jquery/jquery-1.7.2.min.js" charset="utf-8"><' + '/script>';
document.write(js172);
// setInterval(function(){alert($.browser.version)},3000);
setTimeout(function(){alert($.browser.version)},3000);
</script>
</body>
</html>
秒针的JS片断
<script type="text/javascript">
(function(doc){
var t = parseInt((new Date()).getTime() / 1000);
var v = t - t % 300;
var js = doc.createElement("script");
js.charset = "utf-8";
js.src = "http://js.miaozhen.com/mz_ad_serving.js?v=" + v;
var fs = doc.getElementsByTagName('script')[0];
fs.parentNode.insertBefore(js, fs);
})(document);
</script>
改造成插入jQuery的程序
(function(doc){
var t = parseInt((new Date()).getTime() / 1000);
var v = t - t % 300;
var js = doc.createElement("script");
js.charset = "utf-8";
js.src = "http://www1.pconline.com.cn/api/libs/jquery/jquery-1.7.2.min.js?v=" + v;
var fs = doc.getElementsByTagName('script')[0];
fs.parentNode.insertBefore(js, fs);
})(document);
升级版：
<!-- 请将以下代码紧贴于网站</head>标签之前 -->
<script type="text/javascript">
(function() {
window._CiQ10377 = window._CiQ10377 || [];
window._CiQ10377.push(['_cookieUseRootDomain', true]);
var c = document.createElement('script');
c.type = 'text/javascript';
c.async = true;
c.charset = 'utf-8';
c.src = '//collect.cn.miaozhen.com/ca/10377';
var h = document.getElementsByTagName('script')[0];
h.parentNode.insertBefore(c, h);
})();
</script>
<noscript>
<link href="//collect.cn.miaozhen.com/refer/collect?i=10377&v=13922245942&pu=http%3A//%28NoScriptPageviews%29&pt=NoScriptPageviews&ru=http%3A//%28NoScriptClients%29&csh=1000&csw=1000&css=10" rel="stylesheet" type="text/css" />
</noscript>
<script type="text/javascript">
//<![CDATA[
//Miaozhen Code Start
_mzh=window._mzh || [];
_mzh.push(
['_clear'], ['_set_k', '2002058'], ['_set_p', '6rM6g'],
['_send', 'http://g.cn.miaozhen.com/x.gif']
);
(function (doc) {
var t=parseInt((new Date()).getTime()/1000);
var v=t-t%300;
var js=doc.createElement("script"),
fs=doc.getElementsByTagName("script")[0];
js.src="http://js.miaozhen.com/t.js?v="+v;
fs.parentNode.insertBefore(js, fs);
})(document);
//Miaozhen Code End
//]]>
</script>
二、图像对象
图像对象：
建立图像对象：图像对象名称 = new Image([宽度],[高度])
图像对象的属性： border complete height hspace lowsrc name src vspace width
图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload
需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。
参考代码：
var img = new Image();
img.onload = function() {
alert("img is loaded")
};
img.onerror = function() {
alert("error!")
};
img.src="http://s.ztcadx.com/img/i.gif";
function show() {
alert("body is loaded");
};
window.onload = show;
运行上面的代码后，在不同的浏览器中进行测试，发现 IE 和 FF 是有区别的，在 FF 中，img 对象的加载包含在 body 的加载过程中，既是 img加载完之后，body 才算是加载完毕，触发 window.onload 事件。
在 IE 中，img 对象的加载是不包含在 body 的加载过程之中的，body 加载完毕，window.onload 事件触发时，img 对象可能还未加载结束，img.onload事件会在 window.onload 之后触发。
根据上面的问题，考虑到浏览器的兼容性和网页的加载时间，尽量不要在 Image 对象里放置过多的图片，否则在 FF 下会影响网页的下载速度。当然如果你在 window.onload 之后，执行预加载函数，就不会有 FF 中的问题了。
可以通过 Image 对象的 complete 属性来检测图像是否加载完成，每个 Image 对象都有一个 complete 属性，当图像处于装载过程中时，该属性值 false，当发生了 onload、onerror、onabort 中任何一个事件后，则表示图像装载过程结束（不管成没成功），此时 complete 属性为 true 。
注：
- IE 火狐等大众浏览器均支持 Image 对象的 onload 事件
- IE8 及以下、Opera 不支持 onerror 事件
秒针流量监测：
var img = new Image(1, 1); img.src="http://c.x.cn.miaozhen.com/cm.gif?dspid=11187";
1 thought on “动态写入 Script 和 Image”
陈自新 December 26, 2014 at 11:45 am
图片的测试代码、测试结果，均来自 CSDN
Reply