动态创建script在IE中缓存js文件时导致编码的解决方法


Posted in Javascript onMay 04, 2014

先看下重现代码

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缓存导致乱码'; 
document.body.appendChild(p);

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

第一次点击按钮,文字显示正常。

第二次后,文字编码不正确了。

如图

动态创建script在IE中缓存js文件时导致编码的解决方法 

如果不是动态创建的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赋值。
Javascript 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
vue自定义filters过滤器
Apr 26 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 #Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 #Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 #Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 #Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 #Javascript
使用JavaScript获取电池状态的方法
May 03 #Javascript
JavaScript打印网页指定区域的例子
May 03 #Javascript
You might like
PHP 金额数字转换成英文
2010/05/06 PHP
PHP 验证码的实现代码
2011/07/17 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python中的列表推导浅析
2014/04/26 Python
python元组操作实例解析
2014/09/23 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python实现IOU计算案例
2020/04/12 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Django xadmin安装及使用详解
2020/10/26 Python
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
四种会话跟踪技术
2015/05/20 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
企业给企业的表扬信
2014/01/13 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL