动态创建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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
Vue生命周期示例详解
Apr 12 Javascript
js中url对象化管理分析
Dec 29 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php date()日期时间函数详解
2010/05/16 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP创建XML接口示例
2019/07/04 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
Less 安装及基本用法
2018/05/05 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
Overload和Override的区别
2012/09/02 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
python函数指定默认值的实例讲解
2021/03/29 Python
MySQL update set 和 and的区别
2021/05/08 MySQL
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python