It’s time to show this picture:
But IE is not incompatible if you don’t want to be. Say too much is tears.
I have been using iView for over a year. Overall, iView has brought great convenience to my work.
The main joke is that the documentation is not clear enough.
For example, the introduction of components on demand, a few words, after reading according to the documentation of the introduction, the console kept reporting errors.
Then I went to the next element and found that there was not only one way to introduce it. Some of them needed to be introduced through vue.prototype. XXX.
And a description of compatibility,
I thought polyfill would work in IE9, but it didn’t. There is no support for lower versions of Internet Explorer on Github.
In my experience, no major changes are required, and the compatibility is around IE10 +, which is also the compatibility on element’s official documentation.
I don’t know if iView is doing this to get more people into the trap or what, after all most developers look at the official documentation first instead of going to Github to find the issue first.
All joking aside, iView is generally good. Here are the ie9+ compatibility problems and solutions I encountered in the process of using iView.
Install Babel – polyfill
Internet Explorer doesn’t have a built-in Promise object. Not only that, but almost all of the new ES6 methods won’t work in IE, so you’ll need Babel Polyfill
-
First of all,
npm install babel-polyfill --save Copy the code -
Modify webpack. Base. Conf. Js
Before the change
entry: { main: './src/main',},Copy the codeThe modified
entry: { main: ["babel-polyfill"."./src/main"],},Copy the codeWhen I see some online tutorials installing Es6-prommise after installing Babel-Polyfill, I can only say: Gild the lily.
Compatible with the dataset
[Vue WARN]: Error in directive Transfer-dom inserted Hook: "TypeError: Cannot get undefined or null referenced attribute "Transfer"
This is the result of IE10 and below not supporting dataset, and iView’s transfer-dom.js uses this property
Solution: Add the following code to 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 = {}; // Define an empty objectfor(var i = 0; i < attributes.length; I++) {// iterate over all attributes of the nodeif (attributes[i].nodeName.slice(0, 5) === 'data-') {// If the first 5 characters of the attribute name match"data-"// Retrieve the attribute name"data-"Name.push (Attributes [I].nodename.slice (5)); Value.push (attributes[I].nodeValue); }}for (var j = 0; j < name.length; j++) { // 遍历name和value数组
obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中
}
returnobj; // Return object},}); }}Copy the codeDegrade dependent versions
If you encounter the following error:
Error 1: "webpackJsonp" is not defined
Solution:
Change webpack-dev-server version to 2.71 or lower
NPM install - save - dev [email protected]Copy the codeCompatible with requestAnimationFrame (IE9)
Ie9 does not support requestAnimationFrame, if you use it and get an error, that’s ok, just read on.
Solution: Add the following code to main.js
/ / window. RequestAnimationFrame multiple browser compatibility patch / / / / http://paulirish.com/2011/requestanimationframe-for-smart-animating/ http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating // requestAnimationFrame Polyfill by Erik Moller. Fixes from Paul Irish and Tino Zijdelfunction () {
var lastTime = 0;
var vendors = ['ms'.'moz'.'webkit'.'o'];
for(var x = 0; x < vendors.length && ! window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] +'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if(! window.requestAnimationFrame) { window.requestAnimationFrame =function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if(! window.cancelAnimationFrame) { window.cancelAnimationFrame =function (id) {
clearTimeout(id);
};
}
}());
Copy the codeCompatible with classList (IE9)
Error message: Unable to get undefined or null-referenced property ‘add’
Unable to get undefined or null-referenced property 'remove'
If you look at sourceMap and find classList().add or classlist.remove () and so on, there must be a classList problem.
Solution: Add the following code to main.js
if(! ('classList' in document.documentElement)) {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function () {
var self = this;
function update(fn) {
return function (value) {
var classes = self.className.split(/\s+/g);
var index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(' ');
};
}
return {
add: update(function (classes, index, value) {
if(! ~index) classes.push(value); }), remove: update(function (classes, index) {
if (~index) classes.splice(index, 1);
}),
toggle: update(function (classes, index, value) {
if (~index) { classes.splice(index, 1); } else { classes.push(value); }
}),
contains: function (value) {
return!!!!! ~self.className.split(/\s+/g).indexOf(value); }, item:function (i) {
returnself.className.split(/\s+/g)[i] || null; }}; }}); }Copy the codeAvoid location.href for in-project route jumps
For better performance, we usually use route lazy loading. In a single page application, only the corresponding resource file is loaded for each page opened.
If you jump to the previous page, the page will not be loaded again using cached resource files, which effectively improves the page loading efficiency.
If you use location.href, the page will be completely refreshed and all page resources will be reloaded, so you can’t make good use of the cache.
These can be viewed from Network in the Chrome console.
More importantly, if you use location.href directly, Internet Explorer may not refresh the page when the URL changes!
For example, the route is as follows:
127.0.0.1: # 8080 / / home
127.0.0.1: # 8080 / / about
127.0.0.1:8080 /#/home
Click the button to jump
jump(){
location.href = '/#/about'
}
Copy the codeYou’ll notice that the browser url has changed and the page is still home! So you should use it this way
jump() {let url = '/#/about';
let path = url.split(The '#') [1]; this.$router.push(path);
}
Copy the codeThis jump is ok.
Add the following code to the created or Mounted lifecycle of the vue root instance: / / add the following code to the created or Mounted lifecycle of the vue root instance:
window.addEventListener('hashchange', () = > {let currentPath = window.location.hash.slice(1);
if (this.$route.fullPath ! == currentPath) { this.$router.push(currentPath); }},false);
Copy the codeBy listening for hashchange, once the current page URL is found to be different from the browser’s address bar URL, vUE’s routing method is called to jump to the address bar URL.
This method is also triggered if the destination page is keep-alive, but has no effect.
Use the scrollTop
If the page is too long, we add a scroll to the top button
toTop(el){
el.scrollTo(0, 0);
}
Copy the codeWho knows ie under actually indifferent! I tried it, but I found out that Internet Explorer doesn’t support scrollTo.
Change it to this:
toTop(el){
if (el && el.scrollTo) {
el.scrollTo(0, 0);
} else{ el.scrollTop = 0; }}Copy the codeIe can now scroll to the top.
Internet Explorer 9 does not support CROSS-domain CORS
This is the most pit, page in IE10 + open although some places will report an error, but IE9 will not display pages, that is to say, a page can not be displayed!
Console error: Access denied!
I don’t know anything else.
Check the axios and Vue documentation repeatedly and both say ie9 is supported.
This question has tormented me for a long time. Without specific error information, I have no way to start.
One by one. I don’t think it’s Axios.
Ie8/9 does not support CORS cross-domain solution, but instead uses IE’s XDomainRequest method
I don’t want to study the XDomainRequest method anymore. Use the server proxy method provided by Webpack-dev-server directly (if the backend is configured to cross domains), like this:
devServer: {
port: 8080,
proxy: {
'/api': {
target: 'http://xx.xx.cn/',
pathRewrite: {'^/api' : ' '},
changeOrigin: true}}}Copy the codeTo learn more, check out the resource Cross domain request in IE8 and IE9
Do not use new Date(YY-MM-DD) for Date formatting
In Internet Explorer, if you use new Date(‘2018-09-12’) directly,ie will display Invalid Date. In order to ensure consistent performance in all browsers, you should use new Date(‘2018/09/12’).
Determine the Browser Version
function IEVersion() { var userAgent = navigator.userAgent; Var isIE = userAgent.indexof ('compatible') > -1 && userAgent.indexOf('MSIE') > 1; Var isEdge = userAgent.indexof ('Edge'"> < span style =" max-width: 100%; clear: both; min-height: 1em; isIE; Var isIE11 = userAgent.indexof ('Trident') > -1 && userAgent.indexOf('the rv: 11.0') > 1;if (isIE) {
var reIE = new RegExp('MSIE (\\d+\\.\\d+); ');
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp['$1']);
if (fIEVersion === 7) {
return 7;
} else if (fIEVersion === 8) {
return 8;
} else if (fIEVersion === 9) {
return 9;
} else if (fIEVersion === 10) {
return 10;
} else {
return6; // IE version <=7}}else if (isEdge) {
return 'edge'; // edge }else if (isIE11) {
return 11; // IE11
} else {
return- 1; // Not Internet Explorer}};Copy the codeDon’t use some new features
Use translateX() to find ie9 unresponsive.
Linear gradient() can be used, but Ie will not recognize it, so set a solid color background or image background before setting a linear gradient, otherwise IE background will not work.
Flex layout is cool, but don’t use it. For the same effect, the table layout works fine.