动态创建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 关于# 和 void的区别分析
Oct 26 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
JS定义类的六种方式详解
May 12 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
js实现分页功能
2017/05/24 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
工程造价自荐信
2013/10/09 职场文书
初一学生评语大全
2014/04/24 职场文书
机械专业技术员求职信
2014/06/14 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL