动态创建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 Form.elements[i]的使用实例
Nov 13 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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安全防范技巧分享
2011/11/03 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
javascript引用对象的方法
2007/01/11 Javascript
javascript 数组的方法集合
2008/06/05 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
Html5新标签解释及用法
2012/02/17 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
优秀学生干部推荐材料
2014/02/03 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
调研报告的主要写法
2019/04/18 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL