动态创建script在IE中缓存js文件时导致编码的解决方法

先看下重现代码

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 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赋值。

赞 (0)

相关推荐

  • 动态创建script在IE中缓存js文件时导致编码的解决方法

    动态创建script在IE中缓存js文件时导致编码的解决方法

    先看下重现代码 1, gb2312.html 该文件编码为gb2312 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset="gb2312"/> <style> p { color: red; } </style> </head> <body> <button onclic

  • vue在index.html中引入静态文件不生效问题及解决方法

    本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html) 出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的stat

  • Eclipse编辑jsp、js文件时卡死现象的解决办法汇总

    使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windows–>perferences–>validation 把 除了manual 下面的全部点掉,build下只留 classpath dependency Validator 2.关闭拼写检查 windows–>perferences–>general–> editors->

  • Java在创建文件时指定编码的实现方法

    Java在创建文件时指定编码的实现方法

    目录 一.问题分析 二.字符编码 三 .问题解决 前言:最近,学习了Java IO流的相关的知识,想通过读写文件的方式练习和巩固所学知识.在使用File类创建文件时,突然想到,我该如何指定文件使用的编码呢? 进而想到,应该如何查看一个文件的编码呢? 一.问题分析 先去互联网上查找答案,结果如下: FileInputStream fis=new FileInputStream("xxxx.txt"): OutputStreamWriter osw=new OutputStreamWrit

  • IE及IE6浏览器中判断JS文件加载成功失败的方法

    浏览器的文件加载实际上是有非常纠结的兼容问题的.最近看到@lifesinger做了一个具体的总结.这里比较麻烦的是IE6~8不区分加载成功或失败,都走一个回调.在网上看了一种解决方案是,在加载文件的最后置一个全局变量或改变标签的属性来区分,这样成功与否就通过这个标志位判断.但显然不太完美,还要改加载文件. 后来尝试另一种思路,先创建一个vbscript,src置成一个JS文件,如这个文件加载正常,肯定会报错否则不会有反应.这样如果window.onerror捕获到错误了,说明文件有效,再正常加载

  • php ci框架中加载css和js文件失败的原因及解决方法

    在将html页面整合到ci框架里面的时候,加载css和js失败,弄了半天发现ci框架是入口的框架, 对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使 用base_url()函数处理外部的链接. 比如: 在config配置文件中的base_url为:" localhost:8080/项目名称/ " 在控制器中访问application/resource/aaa.js文件 相对路径<script src= "resource

  • GridView中日期不显示时分秒的完美解决方法

    两种处理方式: 1.模版列:假设数据表的字段completeTime的类型为时间格式 <asp:TemplateField HeaderText="时间"> <ItemTemplate> <%#Eval("completeTime", "{0:yyyy-MM-dd}")%> </ItemTemplate> </asp:TemplateField> 2.绑定列: <asp:Bound

  • IE8中动态创建script标签onload无效的解决方法

    本文实例讲述了IE8中动态创建script标签onload无效的解决方法.分享给大家供大家参考.具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件. 代码如下: 复制代码 代码如下: var loadJs = function(src, fun){     var script = null;     script = document.createElement("script");     script.type = &qu

  • vue中缓存组件keep alive的介绍及使用方法

    vue中缓存组件keep alive的介绍及使用方法

    目录 介绍 使用 缓存所有的组件 缓存某个组件 keep-alive的使用示例 include和exclude属性的使用 include的使用 exclude的使用 生命周期 介绍 keep-alive是vue的内置组件,可以用来缓存组件.当它包裹动态组件时,会缓存不活动的组件实例,不会销毁它们:将不活动的组件的状态保留在内存中,可以防止重复渲染DOM,减少加载事件和性能消耗. 注意:keep-alive是一个抽象组件,自身不会渲染成一个DOM元素,也不会出现在父组件链中. 原理: 在 crea

  • VUE项目中引入JS文件的方法总结

    目录 1.在index.html页面使用script标签引入 2.在main.js中使用window.moduleName 使用 3.手动添加export 4. 使用import方式,把需要的js库中的方法挂载到全局 补充:Vue3如何引用全局JS文件 总结 在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址.这样引入后的内容是全局的,可以在所有地方使用. <!D

随机推荐