动态创建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代码
Oct 09 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
将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
咖啡的植物学知识
2021/03/03 咖啡文化
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
php实现微信支付之退款功能
2018/05/30 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
javascript一点特殊用法
2008/05/28 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
详解Python中的strftime()方法的使用
2015/05/22 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
如何把python项目部署到linux服务器
2020/08/26 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
曼城官方网上商店:Manchester City
2019/09/10 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
护士实习自我鉴定
2013/10/22 职场文书
电子商务个人自荐信
2013/12/12 职场文书
房屋出租委托书格式
2014/09/23 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
关于倡议书的范文
2015/04/29 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js