动态创建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 相关文章推荐
js日期相关函数总结分享
Oct 15 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
什么是SOLID
Mar 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
php类
2006/11/27 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php include类文件超时问题处理
2015/02/06 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
Python的Tornado框架异步编程入门实例
2015/04/24 Python
发布你的Python模块详解
2016/09/15 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
物业保安员岗位职责制度
2014/01/30 职场文书
宣传普通话标语
2014/06/27 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
交通事故代理词范文
2015/05/23 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB