动态创建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 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
javascript实现前端分页效果
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
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python模拟三级菜单效果
2017/09/11 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python Tornado框架的使用示例
2020/10/19 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
高职教师岗位职责
2013/12/24 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
教师先进事迹材料
2014/12/16 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2015年教师国培感言
2015/08/01 职场文书
毕业班工作总结
2015/08/10 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
python实现层次聚类的方法
2021/11/01 Python