ie8 及以下引 di18n-translate 相关坑

最新推荐文章于 2025-10-21 15:15:48 发布

原创最新推荐文章于 2025-10-21 15:15:48 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#di18n-translate #di18n

兼容同时被 2 个专栏收录

6 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

在将老项目引入di18n-translate实现国际化时，遇到IE8及以下浏览器的兼容性问题，包括JSON格式错误、关键字识别问题以及ES5特性不支持。通过移除JSON末尾逗号、避免使用default作为关键字、替换Object.defineProperty和模块导入方式，以及解决querySelectorAll方法不支持的问题，最终实现了对IE7及以上的兼容。

bug相关背景：应业务需求，现需要将 jsp文件老项目，运用国际化，经过讨论选用di18n-translate。但是di18n-translate通过npm下载后拿到的di18n.js在现代浏览器运行正常，ie8 及以下无法运行。

SCRIPT1028: 缺少标识符、字符串或数字

这个报错一看，很熟悉吧。很多情况下是因为在旧版ie下json最后一项是不允许有逗号的,那么找到对应报错位置，去掉对象末尾的 “ , ”即可。但是，我们找到报错的行列，内容为如下：

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

可以发现，并没有常规的多余逗号或其他，但是 default 作为关键字被命名给对象属性，这里 ie 下不能正常识别。我们可以利用对象另一种方法进行修改这个问题，只需改为如下:

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

再运行会报错如下：

SCRIPT1010: 缺少标识符

找到发现还是关键字default的原因

文中另两处一起修改：

_translate2.default

// 改为

_translate2["default"]

exports.default = T;

// 改为

exports["default"] = T;

又来

报出第三个坑

SCRIPT445: 对象不支持此操作

找到对应行代码

Object.defineProperty(exports, "__esModule", {    value: true  });

Object.defindProperty是仅ES5支持的新特性，所有 ie8及以下不支持。另外di18n.js抛出的 DI18n 对象由module抛出，module是ES6引入模块化的运用，但目前浏览器并不能直接识别，需要打包工具打成ES5才可以。综上两个文件，我引入了shim 和 sham

<!--[if gte IE 8]> 
    <script type="text/javascript" src="https://cdn.bootcss.com/es5-shim/4.5.10/es5-shim.min.js"></script>  
    <script type="text/javascript" src="https://cdn.bootcss.com/es5-shim/4.5.10/es5-sham.min.js"></script>  
<![endif]-->

ie条件注释真实ie8中好像无效。请慎用ie条件注释。
直接引入或js判断环境后动态加载。ie11下模拟ie8,条件注释有效（自己电脑是ie11）。
上线后发现条件兼容失败，同事ie8下测试ie条件注释无效。

ok！ie8 搞定！

另外 ie7 下还有个小问题

SCRIPT438: 对象不支持“querySelectorAll”属性或方法

找到对应代码

this.doms = {   
       classDoms: document.querySelectorAll('[' + CLASS_ATTRIBUTE + ']'),  
       imgDoms: document.querySelectorAll('[' + IMG_ATTRIBUTE + ']'),    
       contentDoms: document.querySelectorAll('[' + CONTENT_ATTRIBUTE + ']'),          
       inputDoms: document.querySelectorAll('[' + PLACEHOLDER_ATTRIBUTE + ']')    
    };

querySelectorAll() 支持 ie8及以上

改为 jq就行

this.doms = {                      
    classDoms: $("[" + CLASS_ATTRIBUTE + "]"),                    
    imgDoms: $("[" + IMG_ATTRIBUTE + "]"),                   
    contentDoms: $("[" + CONTENT_ATTRIBUTE + "]"),                
    inputDoms: $("[" + PLACEHOLDER_ATTRIBUTE + "]")             
}

引入坑踩完，目前完美兼容 ie7及以上