动态创建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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
jquery实现轮播图效果
Feb 13 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 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 fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python标记语句块使用方法总结
2019/08/05 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python绘制雪景图
2019/12/16 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
UNIX命令速查表
2012/03/10 面试题
探矿工程师自荐信
2014/01/24 职场文书
趣味运动会策划方案
2014/06/02 职场文书
大跃进口号
2014/06/16 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
高三毕业感言
2015/07/30 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript