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

Question

搜索导致我的应用无法在 IE11 中正常运行的隐藏老鼠让我感到非常厌倦。我的反应应用程序在除 IE11 之外的所有浏览器中都能正常工作。 IE11 支持是必须的。我从服务器获取数据并在 ModalBar 中显示给用户。当我从订单表中选择订单并单击打印发票时，会出现模态栏，所有占位符都将填充获得的数据。

这是在铬：

现在这是在 IE11 中：

从服务器获取的数据：

我发现占位符不是作为对象出现的，也不是作为正确填充的对象数组，但“ops”和“details”占位符不是。操作和细节以对象数组的形式出现，我使用 DOMParser 来处理它们。代码如下：

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;
}

我认为问题出在这段代码部分：

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);
          }
        }
      }

此函数中的其他代码部分可以正常工作。我检查了 IE11 中的控制台日志，似乎该功能开始正常工作，但从输出中我得到了缩短的 html 字符串。并且资源管理器没有显示鼠标悬停时是否缩短了字符串。没什么好理解的。我附加了 chrome 和 IE 的屏幕。

Chrome，一切正常：

IE11，简单的短字符串：

为什么 IE11 不像其他浏览器那样显示完整的字符串？从另一个角度来看，如果 IE11 没有正确形成 html 字符串，那么 html 将被破坏，并且 modalBar 中不会显示任何数据。但是除了一些未填充的占位符外，所有表格都显示了所有严格。我认为这意味着 IE11 正确地形成了 html 字符串，但只是没有在其控制台中显示完整的字符串。但为什么？并且 IE11 开始正确填充操作和细节，但最后，它再次在模态窗口中显示缩短的字符串和可悲的结果。

如何解决 IE11 中的问题？老鼠在哪里？提前感谢您的帮助

Answer 1

这可能是因为您在 React 应用程序中使用了一些 es6 函数/javascript 样式，而它在 IE11 中不起作用。 请确保您的 babel 配置正确以与 ie11 一起使用。 它应该是这样的：-

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

请参考这里了解更多 bable documentation