动态创建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 相关文章推荐
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
webpack多页面开发实践
Dec 18 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 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 选项及相关信息函数库
2006/12/04 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python 变量类型详解
2018/10/10 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
公司人力资源的自我评价
2014/01/02 职场文书
工作时间上网检讨书
2014/02/03 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript