Ie兼容

1. 支持ES6新语法，安装babel-polyfillIE不支持es6语法安装npm install --save babel-polyfill# 或者(下同)yarn add babel-polyfill修改webpack.base.conf.js// 修改之前entry: { app: './src/main.js'},// 修改后entry: { app: ['babel-polyfill', './src/main.js']},在main.js中添加import 'babel-polyfill'2. IE10以下，iview的日期组件无法选择兼容dataset，ie10及以下不支持dataset，而iview的transfer-dom.js使用了这个属性方法一：安装element-datasetyarn add element-dataset在main.js中添加import ElementDataset from 'element-dataset'ElementDataset()方法二在main.js中添加if (window.HTMLElement) { if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) { Object.defineProperty(HTMLElement.prototype, 'dataset', { get: function () { var attributes = this.attributes // 获取节点的所有属性 var name = [] var value = [] // 定义两个数组保存属性名和属性值 var obj = {} // 定义一个空对象 for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性 if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-" // 取出属性名的"data-"的后面的字符串放入name数组中 name.push(attributes[i].nodeName.slice(5)) // 取出对应的属性值放入value数组中 value.push(attributes[i].nodeValue) } } for (var j = 0; j < name.length; j++) { // 遍历name和value数组 obj[name[j]] = value[j] // 将属性名和属性值保存到obj中 } return obj // 返回对象 } }) }}3. 支持promiseIE不支持promise安装es6-promiseyarn add es6-promise在main.js中添加import promise from 'es6-promise'promise.polyfill()4. ie9不支持placeholder属性安装ie-placeholderyarn add ie-placeholder在main.js中添加import 'ie-placeholder'转载请注明：溜爸 » vue+iview兼容IE9以上的解决办法 ...

最近，在重构公司官网，需要兼容ie9/10/11，使用vue-cli构建项目。 在查询如何兼容ie时，首先是查看vue cli官网,浏览器兼容性，感觉官网说的不是太明晰（小白一枚，实在不太懂），然后就直接百度了，网上方法基本类似，都是用 browserslist,babel-polyfill等，只是具体步骤有差异，不过 都没有解决本人问题。经过层层查询，逐步对vue-cli 原理了解后，网上查询方法结合本人理解，将问题解决，在此记录下。 先说步骤，然后说一些自己浅显理解。 一.解决步骤1.配置browserslist配置这一项，有两个途径，一是 在 package.json文件中，添加browserslist字段；二是 在项目根目录，创建一个.browserslistrc文件，两种途径。这两种方法不能同时配置，不然运行serve命令会报错。 先说package.json中配置，网上很多如下方法： "browserslist": [ "> 1%", "last 4 versions" ]本人依此配置，报错！然后按照另外一种配置，如下： "browserslist": [ "ie 11" ]成功！ 额外贴出.browserslistrc方法配置方式（只是列出书写方式，代码有效性，按上面来）： > 1%last 4 versions2.安装babel-polyfill依赖这个简单，直接 npm i babel-polyfill --save-dev即可 3.引入babel-polyfill依赖 这一步是关键，网上查询很多，在main.js中，import babel-polyfill引入,本人测试后无效。 具体引入是在vue.config.js中configureWebpack字段中，具体： configureWebpack: config => { config.entry.app = ["babel-polyfill", "./src/main.js"]; }即在webpack入口配置中，加入babel-polyfill。至此，在ie下，兼容es6就解决了！ 二.自己的理解上面把问题解决了，再将自己解决过程中的理解梳理下。 1.首先上面的解决步骤，仅仅适用于源码(/src)，对依赖包无效。当需要对依赖包做兼容转译时，就需要用到官网中Polyfill部分内容了 2.vue-cli中webpack配置文件是在node_modules中的，没有直接在根目录，要想配置webpack，需要在vue.config.js中configureWebpack字段或者chainWebpack配置。具体如下： module.exports = { configureWebpack: { resolve: { alias: { querystring: 'querystring-browser' } } }}module.exports = { chainWebpack: config => { config.resolve.alias.set('querystring', 'querystring-browser') }}解决过程中，查询的相关资料1.Vue 兼容 ie9 的全面解决方案2.Vue CLI 3 浏览器兼容性配置3.Editing webpack.config.js when using vue-cli 3 ...

网页加插入falsh或者视频的时候，在IE浏览器上如果有个弹出层在视频上会被视频挡住的。要是加上wmode="opaque"就没有问题了 手动在标签上加wmode="opaque"是没有问题的。但是使用javascript动态地增加上wmode="opaque"属性，就不可行的。因为embed是传递给flash的参数，如果flash都已经渲染好了，再改这个就没有用了。 因此，若真是有必要动态改属性的话，就则需要利用javascript对整个embed重新进行渲染。

当项目以tab页签方式打开多个iframe窗口时，关闭tab页签同时也需要关闭iframe并释放内存资源，主要是针对IE浏览器。原生js/** * 销毁iframe，释放iframe所占用的内存。 * @param iframe 需要销毁的iframe id */function destroyIframe(iframeID){ var iframe = document.getElementById(iframeID); //把iframe指向空白页面，这样可以释放大部分内存。 iframe.src = ‘about:blank’; try{ iframe.contentWindow.document.write(’’); iframe.contentWindow.document.clear(); }catch(e){} //把iframe从页面移除 iframe.parentNode.removeChild(iframe); }Jquery写法function destroyIframe(iframeID){ var iframe = $(’#’ + iframeID).prop(‘contentWindow’); $(’#’ + iframeID).attr(‘src’, ‘about:blank’); try{ iframe.document.write(’’); iframe.document.clear(); }catch(e){} //把iframe从页面移除 $(’#’ + iframeID).remove(); }

起因　IE浏览器会缓存网页中的GET和XHR的内容，请求方式是get方式时，IE浏览器会进行识别。如果该get请求的url是第一次请求的话，会请求服务器，从数据库中获取数据；如果该get请求的url不是第一次请求的话，那么该url就不会请求服务器，IE浏览器会直接从缓存中拿到上次该url获取的数据。无论是什么插件的get方式请求，IE浏览器都会这样进行处理的，从而导致数据不同步。解决方案1. 在get请求的url中增加随机标识（推荐）在请求后拼接随机数或者时间戳，使两次请求的url不一致，浏览器就不会从缓存中读取数据2. 在axios中设置header，ajax可以用setRequestHeader方法（推荐）const api = axios.create({ // … headers: { ‘Cache-Control’: ’no-cache’ } // …})3. 修改浏览器配置 （只能暂时解决问题）Internet选项 >> 浏览历史记录 >> 设置 >> Internet 临时文件的选项改为‘每次访问网页时’4. 在服务端设置 header(“Cache-Control: no-cache, must-revalidate”)（看情况）5. 改为post接口（不推荐）

最近接手一个React项目，在IE下碰到了俩问题IE11报错如下：跟踪一下之后，发现是一些其他的npm包里面用到了startsWith这个方法，可以自己polyfill一下：if (!String.prototype.startsWith) { String.prototype.startsWith = function (search, pos) { return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search }}不过加prototype的方法毕竟不好，可以通过引入@babel/polyfill解决，在入口文件中引入import ‘@babel/polyfill’;IE11问题解决后，IE10又出问题了。。。犯了stackoverflow和github的很多帖子之后，在这个帖子里找到，发现是Object.setPrototypeOf的问题，Object.setPrototypeOf说是支持了IE9-11, 实际在源码里只实现了11+(https://github.com/paulmillr/…解决办法可以是在polyfill url后加上excludes=Object.setPrototypeOf, 或者自己实现Object.setPrototypeOf方法，我这里引入了一个库setprototypeof，然后在入口文件中加上Object.setPrototypeOf = require(‘setprototypeof’);其实这个库里的实现代码非常少, 可以简单看下’use strict’/* eslint no-proto: 0 */module.exports = Object.setPrototypeOf || ({ proto: [] } instanceof Array ? setProtoOf : mixinProperties)function setProtoOf (obj, proto) { obj.proto = proto return obj}function mixinProperties (obj, proto) { for (var prop in proto) { if (!obj.hasOwnProperty(prop)) { obj[prop] = proto[prop] } } return obj} ...

根据自己的开发过程总结了一些IE的兼容问题1. JSON未定义问题描述：IE8以下浏览器未定义JSON对象，无法使用JSON.parse()和JSON.stringify()方法解决方法：通过IE的if条件判断在IE8及以下浏览器导入json2.js即可扩展：IE的if条件判断<!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–> <!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–> <!–[if IE 6]> 仅IE6可识别 <![endif]–> <!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–> <!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–> <!–[if IE 7]> 仅IE7可识别 <![endif]–> <!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–> <!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>2. IE8下jquery报错：意外地调用了方法或属性访问问题描述：IE8下jquery报错：意外地调用了方法或属性访问解决方法：更改页面 title 不可以使用：$(“title”).html(“hello”);而应该使用：document.title=“hello”;3. IE10以下不支持placeholder属性问题描述：placeholder属性是H5新增的input属性，IE10以下浏览器均不支持解决方法：首先判断当前浏览器版本是否支持placeholder属性，若不支持则通过为input添加focus和blur事件，获得焦点时：获取当前元素的placeholder属性值，并将属性值设置为input的value失去焦点时：判断当前input的value是否等于空（’’）,若为空则将属性值设置为input的value提交时：判断当前input的value是否等于placeholder属性值，若相等则将value等于空//判断input是否支持placeholder属性var input = document.createElement(‘input’);if(“placeholder” in input){alert(‘支持’);}else{alert(‘不支持’);}//jquery解决方法jQuery(’[placeholder]’).focus(function() {var input = jQuery(this);if (input.val() == input.attr(‘placeholder’)) {input.val(’’);input.removeClass(‘placeholder’);}}).blur(function() {var input = jQuery(this);if (input.val() == ’’ || input.val() == input.attr(‘placeholder’)) {input.addClass(‘placeholder’);input.val(input.attr(‘placeholder’));}}).blur().parents(‘form’).submit(function() {jQuery(this).find(’[placeholder]’).each(function() {var input = jQuery(this);if (input.val() == input.attr(‘placeholder’)) {input.val(’’);}})});4. IE7、8 parseInt处理0开头字符串异常问题问题描述：ie8和ie7使用的是ECMAScript3，将’0086’,’0060’按照八进制进行了处理，所以会出现’0060’变成了48，而八进制中是不会出现数字8的，所以parseInt(‘0086’)就返回了0；解决方法：parseInt()函数可解析一个字符串，并返回一个整数。语法 parseInt(string, radix)返回值，返回解析后的数字。说明 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。举例，如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。参数 描述string 必需。要被解析的字符串。radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，parseInt() 将返回 NaN。5. IE报错缺少标识符、字符串或数字问题描述：其他浏览器均没有问题，新版本的IE也没有问题，低版本的IE会报这个错误，由于对象的末尾添加了逗号导致的。解决方法：去掉对象中最后一个键值对后的逗号6.使IE7兼容透明度问题描述：IE7不兼容opacity属性解决办法：.opacity{opacity: 0.5; /通用/filter: alpha(opacity=0); /IE/ -moz-opacity:0.5; /* Mozilla /-khtml-opacity:0.5; / Safari */}7.IE6、7右浮动换行问题问题描述：IE6、7下，若浮动元素之前存在兄弟行内非浮动元素，IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所产生的匿名框的底边，导致该浮动元素折行。解决办法：1、使用css hack，*margin: -28px;为元素添加负的margin，调整位置2、将右浮动元素放在所有兄弟行内非浮动元素的前面3、将所有兄弟行内非浮动元素添加浮动8.IE6、7文字被折行问题描述：<ul><li>…</li> <li>…</li> <li>…</li></ul> li {float:left; margin-right:10px; line-height:20px;} 不定宽的浮动时会出现如下文字折行解决办法：强制文本不换行显示white-space:nowrap9.使用jQuery的load()方法加载代码块时，空白问题描述：低版本的IE在使用jQuery的load()方法加载代码块时，加载失败页面空白，并且控制台未报错。解决办法：低版本的IE对HTML格式要求严格，标签未闭合，标签书写错误，错误嵌套，缺少必须属性等都会导致load()方法加载失败，检查代码，更正错误即可解决。 ...

问题：公司有个项目，功能很简单，读取业务数据，展示在页面上。一个很简单的问题，却因为目标浏览器是IE9，卡了三天。前端给的反馈是：在IE9下，程序一会儿对，一会儿不对……第一次刷不出来，多刷几次就刷出来了。这些话，听着就觉得怪，如果听之任之，就成了不明就里一笔糊涂账。于是，我开始跟他们一起调试，就在大家快要放弃的时候，我发现，这个“一会儿对，一会儿不对”跟console对象的引用有关，只要把引用了console对象的语句注释掉，脚本的运行结果就总是正确，反之，就“一会儿对，一会儿不对”。BUG找到了，但我还是觉得这个console得彻底搞清楚，不然还得至少踩两三年的坑。Does IE9 support console.log, and is it a real function?In Internet Explorer 9 (and 8), the console object is only exposed when the developer tools are opened for a particular tab. If you hide the developer tools window for that tab, the console object remains exposed for each page you navigate to. If you open a new tab, you must also open the developer tools for that tab in order for the console object to be exposed.真不知道这家伙从哪学会的秘籍，这么诡异的现象，即便自己发现了，也不敢这样总结。结论：IE9不能直接引用console，一旦语句中出现console引用，后面的代码就不再执行了，console就像个黑洞，把光都吸走了，无影无踪。一旦你想要借助Development Tools去调试一下，看看是不是console引用出了问题，IE9就会马上创建一个console对象，然后这个BUG就不见了！这时候你关掉Development Tools，console依然还在……下次你再打开新页面，console又成了黑洞。如果没有旁人的帮助，不大可能从这个坑里爬出来的，我们只能告诉客户，程序在IE9中运行的结果是“一会对，一会儿不对，好像是随机的……”。解决方法：把window.console复制给consoleconsole = window.console || {};然后再给这个空的console对象，添加一些空的方法，让它们在IE9以及其他不支持console的浏览器上不要抛异常，好让我们的程序顺利执行。 ...