動(dòng)態(tài)創(chuàng)建script在IE中緩存js文件時(shí)導(dǎo)致編碼的解決方法
更新時(shí)間：2014年05月04日 10:36:53 作者：
這篇文章主要介紹了動(dòng)態(tài)創(chuàng)建script在IE中緩存js文件時(shí)導(dǎo)致編碼的解決方法,需要的朋友可以參考下
先看下重現(xiàn)代碼
1， gb2312.html 該文件編碼為gb2312
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="gb2312"/>
<style>
p {
color: red;
}
</style>
</head>
<body>
<button onclick="loadJS('utf8.js', 'utf-8')">測(cè)試</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>
2， utf8.js 該文件編碼是utf-8
var p = document.createElement('p');
p.innerHTML = 'IE緩存導(dǎo)致亂碼';
document.body.appendChild(p);
loadJS函數(shù)動(dòng)態(tài)創(chuàng)建一個(gè)script，設(shè)置src，charset后添加到head中。這里每次點(diǎn)擊按鈕會(huì)將utf8.js引入到該頁(yè)面中，utf.js內(nèi)代碼會(huì)創(chuàng)建一個(gè)p元素設(shè)置一段文本，然后添加到body上。
第一次點(diǎn)擊按鈕，文字顯示正常。
第二次后，文字編碼不正確了。
如圖
如果不是動(dòng)態(tài)創(chuàng)建的script tag，直接寫(xiě)在html頁(yè)面上，則沒(méi)有此問(wèn)題。
<script type="text/javascript" src="utf8.js" charset="utf-8"></script>
如果采用document.write方式載入js資源也不會(huì)出現(xiàn)該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賦值。
1， gb2312.html 該文件編碼為gb2312
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="gb2312"/>
<style>
p {
color: red;
}
</style>
</head>
<body>
<button onclick="loadJS('utf8.js', 'utf-8')">測(cè)試</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>
2， utf8.js 該文件編碼是utf-8
復(fù)制代碼 代碼如下:
var p = document.createElement('p');
p.innerHTML = 'IE緩存導(dǎo)致亂碼';
document.body.appendChild(p);
loadJS函數(shù)動(dòng)態(tài)創(chuàng)建一個(gè)script，設(shè)置src，charset后添加到head中。這里每次點(diǎn)擊按鈕會(huì)將utf8.js引入到該頁(yè)面中，utf.js內(nèi)代碼會(huì)創(chuàng)建一個(gè)p元素設(shè)置一段文本，然后添加到body上。
第一次點(diǎn)擊按鈕，文字顯示正常。
第二次后，文字編碼不正確了。
如圖
如果不是動(dòng)態(tài)創(chuàng)建的script tag，直接寫(xiě)在html頁(yè)面上，則沒(méi)有此問(wèn)題。
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="utf8.js" charset="utf-8"></script>
如果采用document.write方式載入js資源也不會(huì)出現(xiàn)該bug
復(fù)制代碼 代碼如下:
<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屬性的賦值順序。
復(fù)制代碼 代碼如下:
script.charset = charset;
script.src = src;
即先給charset賦值。
相關(guān)文章
所謂解構(gòu)就是解構(gòu)聚合數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于ES6新語(yǔ)法之解構(gòu)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
原生Javascript插件開(kāi)發(fā)實(shí)踐
本文主要介紹了原生Javascript插件開(kāi)發(fā)實(shí)踐思路與代碼，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
推薦js實(shí)現(xiàn)商品分類(lèi)到搜索欄友好提示（人機(jī)交互）
推薦js實(shí)現(xiàn)商品分類(lèi)到搜索欄友好提示（人機(jī)交互）...2007-05-05
淺析JavaScript 函數(shù)防抖和節(jié)流
這篇文章主要介紹了JavaScript 函數(shù)防抖和節(jié)流的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
京東優(yōu)選小程序的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了京東優(yōu)選小程序的實(shí)現(xiàn)代碼示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了ES6中的數(shù)組擴(kuò)展方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
查詢條件清空將input、select的值清空，下面有個(gè)不錯(cuò)的示例，需要的朋友可以了解下2014-01-01
JS使用Expires?max-age判斷緩存過(guò)期的瀏覽器實(shí)例
這篇文章主要為大家介紹了JS使用Expires?max-age判斷緩存過(guò)期的瀏覽器實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
小程序自定義tabbar導(dǎo)航欄及動(dòng)態(tài)控制tabbar功能實(shí)現(xiàn)方法(uniapp)
在項(xiàng)目中遇到一個(gè)需求,根據(jù)不同的賬號(hào),生成不同的tabBar,下面這篇文章主要給大家介紹了關(guān)于小程序自定義tabbar導(dǎo)航欄及動(dòng)態(tài)控制tabbar功能實(shí)現(xiàn)方法(uniapp)的相關(guān)資料,需要的朋友可以參考下2022-12-12
下面小編就為大家?guī)?lái)一篇js數(shù)組操作方法總結(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-11-11