动态创建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 showModalDialog模态对话框使用说明
Dec 31 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
JavaScript从原型到原型链深入理解
Jun 03 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
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php处理带有中文URL的方法
2016/07/11 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
php 猴子摘桃的算法
2017/06/20 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
js日历功能对象
2012/01/12 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
原生JavaScript实现进度条
2021/02/19 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python zip()函数使用方法解析
2019/10/31 Python
python线程join方法原理解析
2020/02/11 Python
python实现TCP文件传输
2020/03/20 Python
jupyter notebook清除输出方式
2020/04/10 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
后勤人员自我评价怎么写
2013/09/19 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
初中体育课教学反思
2016/02/16 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js