动态创建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 String对象中常用方法小结(字符串操作)
Jan 27 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
js实现九宫格布局效果
May 28 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继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
JS控制GIF图片的停止与显示
2019/10/24 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Django中使用locals()函数的技巧
2015/07/16 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python实现图片批量压缩程序
2018/07/23 Python
Python交互式图形编程的实现
2019/07/25 Python
Python3 assert断言实现原理解析
2020/03/02 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python 读取位于包中的数据文件
2020/08/07 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
迟到检讨书大全
2014/01/25 职场文书
全国道德模范事迹
2014/02/01 职场文书
合伙协议书
2014/04/23 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
认真学习保证书
2015/02/26 职场文书
机关保密工作承诺书
2015/05/04 职场文书