动态创立script在IE中缓存js文件时形成编码的减轻

时间:2019-07-30 00:15来源:2020欧洲杯冠军竞猜官方网站
先看下再一次出今世码 这里只谈谈帮助互相下载的浏览景况,大概分成二种,一种是按加向DOM树中加的逐一推行,另一种按下载达成的先后顺序推行;那样假诺js文件间有依靠关系的话

先看下再一次出今世码

这里只谈谈帮助互相下载的浏览景况,大概分成二种,一种是按加向DOM树中加的逐一推行,另一种按下载达成的先后顺序推行;那样假诺js文件间有依靠关系的话,且是按下载顺序试行,且在未有缓存的景色下就能够报错(日常的图景下首先次试行会报错,http重回状态200,假如缓存未禁止使用,http状态是304,就不会报错了)
而ie正是按http下载实现的先后顺序推行js代码的,首先看上边的代码:

1, gb2312.html 该文件编码为gb2312

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Model</title>
<meta http-equiv="Content-language" content="zh-CN" />
</head>
<body>
<div id="page">
</div><2020欧洲杯冠军竞猜官方网站,!-- Page end! -->
<script type="text/javascript">
//<![CDATA[
var js = document.createElement('script');
js.type = 'text/javascript';
js.src = 'alert.js';
if(js.readyState){
js.onreadystatechange = function(){
if (js.readyState == "loaded" || js.readyState == "complete"){
alert(js.readyState);
document.getElementsByTagName('head')[0].appendChild(js);
}
};
}else{
document.getElementsByTagName('head')[0].appendChild(js);
js.onload = function(){
alert('loaded not in ie!');
};
}
//]]>
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="gb2312"/>
<style>
p {
color: red;
}
</style>
</head>
<body>
<button onclick="loadJS('utf8.js', 'utf-8')">测试</button>
<script>
function loadJS(src, charset) {
var script = document.createElement('script');
script.src = src;
script.charset = charset;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}
</script>
</body>
</html>

其间动态加载的alert.js文件中剧情为:alert('in alert.js');
通过测量检验(ie8),能够窥见弹出的剧情先后为:loaded、in alert.js、complete
查资料可得ie下向DOM中增添script时有onreadystatechange事件(别的浏览器有onload事件),而事件中js.readyState的图景变化为:loading(下载中)、loaded(下载实现)、complete(代码推行实现)
从代码中得以看来笔者是在事件中才向DOM中增多创造的scrip结点的……
故而得以摄取ie在开立scrip结点并给src赋值时就起始有http下载了,那与另外浏览器完全两样(其余浏览器是要把script结点加到DOM中才会有http下载的),而把scrip结点向DOM树中增加后才起来推行代码。
有了这个结论大家就能够缓和ie下并行下载顺序实践的主题素材了;有二种方案:一种是边下载边顺序实践,另一种是全下载完再逐个实行。
二种各有裨益,这里给出后一种情况的代码(loader.js):

2, utf8.js 该文件编码是utf-8

复制代码 代码如下:

复制代码 代码如下:

/*
* Author: JaiHo
*/
(function(window){
var DOMLoader = (function(){
var DOMLoader = function(){
return new DOMLoader.prototype.init();
};
DOMLoader.prototype = {
jsList:[], js_all:0, loaded_js:0,
head:document.getElementsByTagName('head')[0],
init:function(){ },
create_node:function(src){
var js = document.createElement('script');
js.type = 'text/javascript';
this.bindWait(js);
this.jsList[this.jsList.length] = js;
js.src = src;
},
loadJS:function(list){
len = list.length;
for(var i=0; i<len; i ){
if( i==len-1 )
this.js_all = len;
this.create_node(list[i]);
}
return this;
},
bindWait:function(js){
if(arguments.callee.caller!==this.create_node) return;
var that = this;
if(js.readyState){
js.onreadystatechange = function(){
if( js.readyState == 'loaded' ){
that.loaded_js ;
if( that.js_all == that.loaded_js ){
that.head.appendChild( that.jsList.shift() );
}
}
if ( js.readyState == "complete" ){
js.onreadystatechange = null;
if( that.jsList.length ){
that.head.appendChild( that.jsList.shift() );
}
}
};
}else{
js.onload = function(){
alert('not in ie!');
};
}
return this;
}
};
DOMLoader.prototype.init.prototype = DOMLoader.prototype;
return window.DOMLoader = DOMLoader;
})();
})(window);

var p = document.createElement('p');
p.innerHTML = 'IE缓存导致乱码';
document.body.appendChild(p);

测量试验例子如下:

loadJS函数动态创设八个script,设置src,charset后增添到head中。这里每一遍点击开关会将utf8.js引进到该页面中,utf.js内代码会创设八个p元素设置一段文本,然后加多到body上。

复制代码 代码如下:

先是次点击开关,文字显示不荒谬。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Loader</title>
<meta http-equiv="Content-language" content="zh-CN" />
<style type="text/css" media="all">
</style>
</head>
<body>
<div>
</div>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
var loader = DOMLoader();
loader.loadJS([ 'json.js', 'jquery-1.5.min.js', 'test.js' ]);
};
//]]>
</script>
</body>
</html>

其次次后,文字编码不得法了。

2020欧洲杯冠军竞猜官方网站 1

如图

      可以看到加载的3个js文件是互为下载的。
      对于别的浏览器有动态加载js文件的交互下载和顺序施行难题的情事,最近还从未相对完善的缓和方案(假设有了请指教一下。。),单从这么些方面,个人以为ie的那么些onreadystatechange事件方案绝对好些。

2020欧洲杯冠军竞猜官方网站 2 

...

比如不是动态创建的script tag,直接写在html页面上,则并未有此难点。

复制代码 代码如下:

<script type="text/javascript" src="utf8.js" charset="utf-8"></script>

只要利用document.write方式载入js能源也不会并发该bug

复制代码 代码如下:

<script>
function loadByWrite(url, charset) {
var str = '<script type="text/javascript"' ' src="' url '" charset="' charset '"><' '/script>';
document.write(str);
}
</script>
<script>
loadByWrite('utf8.js', 'utf-8')
</script>

竭泽而渔办法是换下src和charset属性的赋值顺序。

复制代码 代码如下:

script.charset = charset;
script.src = src;

即先给charset赋值。

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:动态创立script在IE中缓存js文件时形成编码的减轻

关键词: 欧洲杯竞猜