1. 问题背景
某个老产品需要支持IE8,前端部分组件采用scrat开发体系进行开发的,当页面中内嵌的iframe的页面再加载组件js的时候,某些情况下会出现组件的js乱码,导致组件的js不能运行。而且,乱码并不会在第一次加载页面时发生,而是第二次第三次…加载页才会发生。
页面结构详细情况如下(页面编码为啥没统一,因为有历史原因…请忽略):
当用node的express服务放置iframe对应的页面时,不会出现问题。
当用tomcat服务器放置iframe对应页面时,不会出现问题。
不管用node的express还是tomcat,在乱码的js路径后面加随机参数(比如+ ‘t=(new Date).getTime()’),也不会出现问题(此实验只是说每次都从服务器请求)。
2. 解决办法
目前做实验的结果分析来看,IE在第一次从服务器加载此js文件并没有造成乱码,当第二次以后从IE的缓存里再动态加载这个组件js文件时就会出现乱码。(此问题复现条件比较苛刻)
在网上搜了一下,有个不是很起眼的网页讲述了这个问题的解决办法,问题现象几乎一致,但是没说为什么。
由于js是scrat的scrat.js动态加载进来的,分析其load方法,修改
if (isScript) { node.type = 'text/javascript'; node.async = 'async'; node.charset = 'UTF-8';// 为解决这个问题新加的代码 node.src = url; }
在设置src前指定编码 node.charset = 'UTF-8';
这样就可以解决问题,但上面的实验中的几个对比到底是什么原因造成的结果,没有弄清楚细节。