动态创建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插件制作 图片走廊 gallery
Aug 17 Javascript
javascript函数特点实例分析
May 14 Javascript
关于JS中prototype的理解
Sep 07 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
js+css实现打字效果
Jun 24 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
viewer.js实现图片预览功能
Jun 24 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/10/09 PHP
PHP4实际应用经验篇(8)
2006/10/09 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
基于zTree树形菜单的使用实例
2017/12/25 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
详解Python_shutil模块
2019/03/15 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python如何安装下载后的模块
2020/07/03 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
成语的广告词
2014/03/19 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python