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