运行在 Gatsby 中出现错误之前在 IE 上显示警报和重定向的脚本

Question

我正在运行在 Netlify 上创建一个 Gatsby 站点，有一个特定于 IE 的错误/崩溃，我想显示一个警告，然后重定向到 chrome 下载页面，如果用户是使用 IE，因为我不支持 IE。我认为崩溃是由 npm 包引起的，我不想换成其他包，因为它适合我的需要。

我将下面的脚本放在每个页面上运行的 Layout 组件中，但是错误开始并使站点崩溃，站点在崩溃之前闪烁正常 dom。想知道有没有办法解决

如果我将条件更改为 chrome 并在 chrome 上将其运行进行测试，则脚本可以正常工作

//Layout.js


const handleIE = () => {
  if (typeof window !== "undefined") {
    let ua = window.navigator.userAgent
    
    if(ua.indexOf('MSIE') > -1) {
      alert('Internet Explorer is not supported. Please use Chrome or Firefox')
      window.location.href = "https://www.google.com/chrome/";
    }
  }
}

<Helmet>
 <script>{handleIE()}</script>
</Helmet>

// Error log on IE

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
HTML1300: Navigation occurred.
SEC7118: XMLHttpRequest for https://ka-f.fontawesome.com/releases/v5.15.3/css/free.min.css?token=e4232fccfser required Cross Origin Resource Sharing (CORS).
SEC7118: XMLHttpRequest for https://ka-f.fontawesome.com/releases/v5.15.3/css/free-v4-shims.min.css?token=e4232fccfser required Cross Origin Resource Sharing (CORS).
SEC7118: XMLHttpRequest for https://ka-f.fontawesome.com/releases/v5.15.3/css/free-v4-font-face.min.css?token=e4232fccfser required Cross Origin Resource Sharing (CORS).
SCRIPT1003: Expected ':' File: classic.js, Line: 679, Column: 32
SCRIPT1003: Expected ':' File: classic.js, Line: 679, Column: 32
[object Error]
description "Object doesn't support property or method 'trunc'"
message     "Object doesn't support property or method 'trunc'"
name        "TypeError"
number      -2146827850
stack       "TypeError: Object doesn't support property or method 'trunc'
SCRIPT438:  Object doesn't support property or method 'trunc'
File: framework-7bdbbf12b92c7ff172a2.js, Line: 2, Column: 2442

谢谢！！

Answer 1

IE 问题会在脚本加载之前破坏您的应用程序。尽管不太可能，因为您在导入 Layout 组件的每个页面中加载脚本（您可能想使用 gatsby-browser APIs 之一），但您的代码似乎有效。

如果您希望能够通过向 IE 显示警告来绕过此限制用户你可能需要填充功能，至少允许 trunc 方法，这似乎是有问题的方法。

表示，这个trunc方法可能来自你的代码（不太可能）或者来自第三方依赖。如果它来自您的代码，只需将其删除或找到另一个 IE 友好的解决方案。如果它来自其中一个 Node 模块，您可能需要寻找其他解决方案。

首先，您需要找到导致此问题的依赖项，然后，如GitHub thread中所述。

在您的 Gatsby 项目的根目录下创建一个 .babelrc：

{
  "env": {
    "test": {
      "presets": [
        "@babel/preset-env",
        {
          "loose": true,
          "modules": "commonjs",
          "useBuiltIns": "entry",
          "targets": { "browsers": [">0.25%", "not dead"] }
        }
      ]
    }
  },
  "presets": [
    "babel-preset-gatsby",
    [
      "@babel/preset-env",
      {
        "debug": true,
        "loose": true,
        "modules": false,
        "useBuiltIns": "entry",
        "targets": { "browsers": [">0.25%", "not dead"] }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "babel-plugin-macros",
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": true,
        "regenerator": true
      }
    ]
  ]
}

注意：您可能需要安装所需的模块。

然后，你只需要添加polyfill。在你的 gatsby-browser.js:

import '@babel/polyfill'

// eslint-disable-next-line import/prefer-default-export
export const onClientEntry = () => {
  // Without this function body the import will not be picked up.
 // handleIE()
}

正如我在 post 开头所说的那样，这个 gatsby-browser.js API (onClientEntry) 将适用于您的用例，因此您可以重复使用它。您可以在那里加载您的脚本 (handleIE) 以检查用户代理。这样，您将只为每个用户输入一次脚本加载一次，而不是 X 次（每个扩展用户访问的 Layout 组件的页面加载一次）

您可能还会发现这个 GitHub gist 关于 Gatsby 中的 polyfill IE 10-11 的有用信息。

运行在 Gatsby 中出现错误之前在 IE 上显示警报和重定向的脚本

Run script to show alert and redirect on IE before error kicks in in Gatsby

javascript

internet-explorer

reactjs

gatsby

运行 在 Gatsby 中出现错误之前在 IE 上显示警报和重定向的脚本

Run script to show alert and redirect on IE before error kicks in in Gatsby

javascript

internet-explorer

reactjs

gatsby

运行在 Gatsby 中出现错误之前在 IE 上显示警报和重定向的脚本