Dom 解析在 IE11 中的 React App 上无法正常工作

Question

I am very tired with searсhing the hidden rat that causes my app to not correctly work in IE11. My react App works properly in all browsers except for IE11. IE11 support is must-have. I obtain data from server and show it to the user in ModalBar. When I select the order from table of orders and click on printing the invoice the modalbar appears and all placeholders will be filled with obtained data.

this is in chrome:

and now this is in IE11:

the data obtained from server:

I figured out that placeholders which come not as object, and not as array of objects filled properly but "ops" and "details" placeholders not. Ops and details come as array of objects and I use DOMParser to work with them. Here is the code:

prepareDocumentContent(document, documentData) {
let content = document.body;
console.log(88888888880, content);
if (isObject(documentData)) {
  const placeholders = document.placeholders.split(',').map(item => item.trim());
  let parsedArrays = [];
  for(let k = 0; k < placeholders.length; k++) {
    const placeholder = placeholders[k];
    const isObjectValue = placeholder.includes('.');
    if (isObjectValue) {
      const objectName = placeholder.split('.')[0];
      if (documentData[objectName] instanceof Array) {
        if (parsedArrays.indexOf(objectName) < 0) {
          parsedArrays = [
            ...parsedArrays,
            objectName
          ];
          const parser = new DOMParser();
          const doc = parser.parseFromString(content, 'text/html');
          const elements = doc.getElementsByClassName(objectName);
          for (let ei = 0; ei < elements.length; ei++) {
            const element = elements.item(ei);
            let replace = '';
            const arr = documentData[objectName];
            for (let i = 0; i < arr.length; i++) {
              let newElement = element.outerHTML;
              console.log('newElement', newElement);
              const item = arr[i];
              const names = Object.keys(item);
              for (let j = 0; j < names.length; j++) {
                const itemName = names[j];
                const regex = new RegExp(`{${objectName}` + '.' + `${itemName}}`, 'g');
                const replacing = typeof item[itemName] === 'undefined'
                  ? (!this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '')
                  : item[itemName];
                console.log('replacing', replacing);
                newElement = newElement.replace(
                  regex,
                  replacing
                );
              }
              replace = replace + newElement;
              console.log('replace', replace);
            }
            content = content.replace(element.outerHTML, replace);
            console.log('contentObtained', content);
          }
        }
      } else {
        const regex = new RegExp(`{${placeholder}}`, 'g');
        const objectNotExists = typeof documentData[objectName] === 'undefined' || typeof documentData[objectName][placeholder.split('.')[1]] === 'undefined';
        const replacing = objectNotExists? (!this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '' )
          : documentData[objectName][placeholder.split('.')[1]];
        content = content.replace(
          regex,
          replacing
        );
      }
    } else {
      const regex = new RegExp(`{${placeholder}}`, 'g');
      const replacing = !documentData[placeholder]
        ? (!this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '')
        : documentData[placeholder];
      content = content.replace(
        regex,
        replacing
      );
    }
  }
} else {
  content = documentData.replace(/\n/g, '<br />');
}
const placeholders = document.placeholders.split(',');
placeholders.map(placeholder => {
  const regex = new RegExp(`{${placeholder}}`, 'g');
  const replacing = !this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '';
  content = content.replace(
    regex,
    replacing
  );
});
return content;
}

I think the problem is with this code section:

if (documentData[objectName] instanceof Array) {
        if (parsedArrays.indexOf(objectName) < 0) {
          parsedArrays = [
            ...parsedArrays,
            objectName
          ];
          const parser = new DOMParser();
          const doc = parser.parseFromString(content, 'text/html');
          const elements = doc.getElementsByClassName(objectName);
          for (let ei = 0; ei < elements.length; ei++) {
            const element = elements.item(ei);
            let replace = '';
            const arr = documentData[objectName];
            for (let i = 0; i < arr.length; i++) {
              let newElement = element.outerHTML;
              console.log('newElement', newElement);
              const item = arr[i];
              const names = Object.keys(item);
              for (let j = 0; j < names.length; j++) {
                const itemName = names[j];
                const regex = new RegExp(`{${objectName}` + '.' + `${itemName}}`, 'g');
                const replacing = typeof item[itemName] === 'undefined'
                  ? (!this.props.isIgnoreNotSpecified ? i18n.t('ModalWysiwygBar.not_specified') : '')
                  : item[itemName];
                console.log('replacing', replacing);
                newElement = newElement.replace(
                  regex,
                  replacing
                );
              }
              replace = replace + newElement;
              console.log('replace', replace);
            }
            content = content.replace(element.outerHTML, replace);
            console.log('contentObtained', content);
          }
        }
      }

other sections of code in this function do own work rightly. I examined the console logs in IE11 and it seems that the function begins to work correctly but from the output I get cutted shortened html string. And explorer doesnt show is the string shortened or not on mouse hover. Nothing understandable. I attached screens of chrome and IE.

Chrome, everything right:

IE11, simple shortened string:

Why IE11 doesn't show full string as other browsers? And in another point of view, if IE11 does not form html string correctly then html will be broken and no data will be shown in modalBar. But there are all tables all stricture shown except for some unfilled placeholders. I think it means that IE11 form html string rightly, but just does not show full string in its console. But why? and IE11 begin to fill ops and details correctly, but again, in the end, it shows shortened string and lamentable result in the modal window.

HOW TO Overcome the problem in IE11 ? where is the rat? Thanks in advance for your help

Answer 1

This might be because you are using some es6 functions/styles of javascript in your react app and its not working in IE11. Please make sure your babel configured properly to work with ie11. it should be something like this:-

{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}

Please refer this for more bable documentation