动态创建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 相关文章推荐
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
将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连接数据库代码应用分析
2011/05/29 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python的垃圾回收机制详解
2019/08/28 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
企业申诉管理制度
2014/01/30 职场文书
《童趣》教学反思
2014/02/19 职场文书
幼儿园见习报告
2014/10/30 职场文书
离婚起诉书范本
2015/05/18 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫