I didn’t think there would be any compatibility issues under IE11, after all, IE11 is barely a new era browser, but in practice, there are a lot of problems!

Problem 1: Unreadable ES6 syntax or other new JS features appear in packaged code

Scope: global

Solution:

First check the JS file reporting the error. If there is a js syntax error in the chunk-vendor file, it can be basically determined that the code introduced in the dependency package is not ES5 code. Since the online code is compressed, it is impossible to determine which dependency package uses IE and cannot recognize other codes. In this case, you can run the yarn build –mode=development command locally to obtain an uncompressed file containing the path information of the package in the imported node_modules. Then, you can compare the file in the Internet Explorer to search for the dependent package. After confirmation, add the transpileDependencies option in vue.config.js to the package name.

If errors are reported in other chunk files or main.js, it is usually because the code uses some new JS features that are not supported in IE. You can find relevant code changes by yourself.

For example, some incompatible dependency packages have been found in our project. The incompatible dependency packages are as follows:

    // vue.config.js.transpileDependencies: ["vue-echarts-v3"."view-design"."elasticsearch"]...Copy the code

View-design ([email protected]) itself provides es5 code, but Babel handles it because of the Emitter functions introduced in iView. In addition, if iView is introduced on demand, it needs to be translated into ES5 code by Babel.

Problem 2: Chinese parameters in GET requests are garbled

Scope: globalCopy the code

Solution:

1). EncodeURIComponent is used to encode parameters of GET

2). If you use AXIos as an Ajax request, put the parameters into Params instead of concatenating them manually and Axios will code them automatically

Problem 3: When el-Cascader is in multi-select mode and filterable is true, it automatically focuses and the selection panel pops up.

– The onInput event will be triggered when the input placeholder value changes in IE11, even if the input placeholder value has not changed.

Scope: Element-UI Cascader component

Solution:

Modify the method code in the component

import { Cascader } from 'element-ui';

const isIE = !isNaN(Number(document.documentMode));

if(isIE) {
  Cascader.methods.handleInput = function(val,event) {
  // Dropdown only pops when a value is entered
    if(this.multiple && this.filterable && val) {
      !this.dropDownVisible && this.toggleDropDownVisible(true);
    }
    // The following code is the source of the el-Cascader component

    if (event && event.isComposing) return;
    if (val) {
      this.filterHandler();
    } else {
      this.filtering = false;
    }
  }
}
Vue.component(Cascader.name, Cascader);
Copy the code

Problem 4: The El-Cascader component cannot display label text in multi-select mode.

Scope: Element-UI Cascader component

Flex :1 1 auto; flex:1 1 auto;

Q5: If a Flex layout has position: Absolute, do not rely on the default position in the Flex layout to position the absolute.

Scope: global

An element that is set to position:absolute without a specific position is used in the original document flow, but in IE if the Flex child is set to absolute position in the Flex layout, the style does not remain in the original position.

Ex. :

    <div style="display:flex; align-items:center">
        <i style="position:absolute">
    </div>
    <! If the I element is an absolute positioning element, and no positioning is set, then we would expect the I element to be vertically centered. In Chrome it is, but in Ie it is not centered, so it is better to give a positioning.
Copy the code

Problem 6: An error occurs when the iView Table component enables the drag sorting function

Cause: In IE, when the drag-and-drop event stores data through E.datatransfer. setData, the key can only be text or URL (case and case). Otherwise, an error will be reported. The drag of the Table component to save the index through e.datatransfer.setData (‘index’,index) causes an error

Scope: IView library Table component

Solution: Manually modify the methods in the component after importing the iView component library in the entry file. Remember not to use the arrow function, otherwise this points to an error.

    import iView from 'iview';
    iView.Table.components.tableBody.components.TableTr.methods.onDrag = function(e, index){
      e.dataTransfer.setData('text',index);
    };
    iView.Table.components.tableBody.components.TableTr.methods.onDrop = function(e, index){
      const dragIndex = e.dataTransfer.getData('text');
      this.$parent.$parent.dragAndDrop(dragIndex,index);
      e.preventDefault();
    }
Copy the code

Problem 7: Internet Explorer caches the content of Ajax GET requests in web pages

Cause: If the request mode is GET, Internet Explorer identifies the request. If the URL of the GET request is the first request, the server is requested to get the latest data from the server. If the URL of the GET request is not the first request, the url will not request the server, and The Internet Explorer will directly retrieve the data obtained from the cache of the last URL, resulting in data synchronization

Scope: global

Solution (choose one) :

  1. Adding a random identifier to the URL of a GET request, such as adding a timestamp, is typically done in axios’s request interceptor with a timestamp parameter.

  2. Set request header ‘cache-control ‘: ‘no-cache’

   // This request header tells the browser to verify with the server before using the local cache
   const httpRequest = axios.create({
     headers: {
       'Cache-Control': 'no-cache'}})Copy the code

Problem 8: Internet Explorer does not support sticky positioningposition: sticky, do not use this positioning mode

Problem 9: NodeList does not support the forEach method in IE

Solution: NodeList is essentially a collection and an array structure, so you can convert it to an array structure and use the associated array API.

   const body = document.body;
   // This method is not supported in IE
   body.childNodes.forEach(node= >{... })// It is safe to use when converted to an array structure
   const nodeArr = [].slice.call(body.childNodes);
   nodeArr.forEach(node= >{... })Copy the code

Problem 10: The trailing assertion regular expression is not recognized

Scope: global

Solution:

What is a trailing assertion, that is, /(? <=a)b/ in this form, this line of re means to search for the b character immediately following the A character. As Ie cannot support this type of re, it needs to be modified. You can change it to a common capture re, for example, change the above re to/A (b)/, and take the first capture group in the matching result