( https://GitHub.com/xcatliu/react-ie8 )
一, 按照官方微博的公布信息, 支持 ie8 的最高版本是 react@0.14 版本, 如果高于这个版本则是不兼容 IE8 的, 所以得确定你使用的 react 版本不高于 0.14. 根据官方的说法, 兼容的方法只需要在 index.html 中引入 es5-shim.JS 和 es5-sham.JS(可以通过百度 搜索下载) 这两个文件就行, 这两个文件是一个将 es5 语法修改兼容 es3 语法的 polyfill, 但在项目实际添加了这两个文件后, 还是会报一些错误.
二, 确保使用的 jQuery 版本是 1.x.x 的版本, IE8 不支持 Juqery2.x 的版本. 如果你使用了 Bootstrap 框架, 这个框架需要最低的 jQuery 版本是 1.9 以上.
三, 对于另外两个框架 , 我使用的是 "react-redux": "^4.4.1","react-router": "^1.0.3".
四, 需要在 package.JSON 中加入以下的几个依赖包:
- "console-polyfill": "^0.2.2",
- "es5-shim": "^4.4.1",
- "eventsource-polyfill": "^0.9.6",
- "fetch-ie8": "^1.4.0",
- "babel-polyfill": "^6.7.4",
加入以上几个依赖包后, 在自己的前端程序入口的地方, 把上面的几个安装包引入程序当中:
- require('es5-shim');
- require('es5-shim/es5-sham');
- require('console-polyfill');
- require('fetch-ie8');
- require('babel-polyfill');
五, 以上的步骤完成后, ie8 还是会报错, 主要是 Object.defineProperty 函数相关的错误. 这个时候需要一个关键的步骤在 package.JSON 中加入
"es3ify-loader": "^0.2.0",
这是一个将 es5,es6 语法转换成 es3 语法的包, 这个包不需要在代码中引入到程序中, 而是当我们的 App.JS 打包完成后, 再使用这个 loader 进行再次的打包, 我的 App.JS 是采用 gulp 打包的, 但 es3ify-loader 只能用 webpack 打包工具
来进行调用, 所以需要在项目目录安装 webpack, 输入命令: NPM install -g webpack. 同时在目录下创建 webpack.config.JS, 里面内容是:
- var webpack = require('webpack');
- module.exports = {
- // 页面入口文件配置, 这里是用 gulp 打包出来的 App.JS
- entry: {
- index : './build/App.JS'
- },
- // 入口文件输出配置, 这里需要设置对 App.JS 打包后得到的文件名称
- output: {
- path: './',
- filename: 'bundle.JS'
- },
- module: {
- // 加载器配置, 这里使用 es3ify-loader 对 App.JS 进行再次打包;
- loaders: [
- {
- test: /.JS?$/,
- loaders: ['es3ify-loader'],
- },
- ]
- },
- };
以上步骤完成后, 在项目目录下输入命令: webpack 则会自动开始打包, 打包后本级目录下会生成 bundle.JS;
六, 完成上述步骤后, 就完成了 React+Redux+Ruoter 框架在 IE8 下的兼容性修改. 这是我的完整修改过程, 修改完成后程序顺利在 IE8 下运行起来了, 由于整个前端编写的是一个单页应用, 在 IE8 下页面切换刷新还是比较慢的.
本文来自 lycIT 的 CSDN 博客 , 全文地址请点击:( )
一句话解决 IE 兼容问题
<meta http-equiv="X-UA-Compatible" content="IE=7">
以上代码告诉 IE 浏览器, 无论是否用 DTD 声明文档标准, IE8/9 都会以 IE7 引擎来渲染页面.
<meta http-equiv="X-UA-Compatible" content="IE=8">
以上代码告诉 IE 浏览器, IE8/9 都会以 IE8 引擎来渲染页面.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
以上代码告诉 IE 浏览器, IE8/9 及以后的版本都会以最高版本 IE 来渲染页面.
- <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
- <meta http-equiv="X-UA-Compatible" content="IE=7,9">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1">
以上代码 IE=edge 告诉 IE 使用最新的引擎渲染网页, Chrome=1 则可以激活 Chrome Frame
来源: http://www.qdfuns.com/article/51006/53f18e14247006e05c63947c430fb983.html