动态创建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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
快速了解python leveldb
2018/01/18 Python
python爬虫实例详解
2018/06/19 Python
详解python Todo清单实战
2018/11/01 Python
Python模块的加载讲解
2019/01/15 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Django如何批量创建Model
2020/09/01 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
学术会议欢迎词
2014/01/09 职场文书
2014年度党员自我评议
2014/09/13 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
《假如》教学反思
2016/02/17 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python