如何在 gatsby 的特定页面中加载脚本答案

【问题标题】：How to load script in specific page in gatsby如何在 gatsby 的特定页面中加载脚本
【发布时间】：2021-01-21 21:08:05
【问题描述】：

你好。

我最近在我的 gatsby 网站上遇到了一些非常重要的事情。
我必须从其他站点导入脚本，因为它提供了地图小部件。这是来自波兰快递公司的小部件，仅在链接https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js 下提供。

它由函数window.PPWidgetApp.toggleMap() 激活。问题是当我尝试激活时，小部件中的 html 和 css 标记正在显示，但来自 js 的地图却没有。

这是我加载脚本的方式：

{
  resolve: "gatsby-plugin-load-script",
  options: {
    src:
      "https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js",
  },
},

当我在使用此小部件的特定路线上并刷新页面时，一切正常。所以我猜问题是当这个脚本加载到索引中时，它会被 gatsby 以某种方式缓存，并且大多数重要功能都不起作用。那么我可以仅在我使用路由 /delivery 时加载脚本吗？或者是否有另一种更好的方法来加载这个脚本可能工作正常？

链接到 github repo 有这个问题：https://github.com/Exanderal/gatsby-problem

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

最简单、原生和内置的实现方式是使用<Helmet> 组件。基本上，该组件将您的 <head> 标记中的所有内容嵌入其中。

使用它的问题是，如果您需要激活或等待其加载以执行某些操作（例如 window.PPWidgetApp.toggleMap() 在您的情况下），它可能有点错误，因为有时它可能会正确加载但有时不能。我将向您展示不同的方法来检查哪种方法更适合您。

<Helmet> 方法：
```
<Helmet>
  <script src="https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js"/>
</Helmet>
```
正如我所说，这种解决方法可能适用于独立脚本，但如果您需要执行操作或等待其加载，它可能不起作用。下一个方法应该适合你。
自定义脚本加载方式：
```
 const addExternalScript = (url, callback) => {
   const script = document.createElement('script');
   script.src = url;
   script.async=true;
   script.onload = callback;
   document.body.appendChild(script);
};

useEffect(()=>{
 addExternalScript("https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js",window.PPWidgetApp.toggleMap())
},[])
```
基本上，您正在设置一个自定义函数 (addExternalScript)，该函数创建与第一种方法相同的脚本标记，并将传递的 URL 作为第一个函数参数嵌入。第二个参数是在onload函数中加载后触发的回调函数。

它在 useEffect 函数中触发的所有内容，deps ([]) 为空。 useEffect 是一个钩子（在 React 版本 ^16 中可用），一旦加载 DOM 树就会触发，在这种情况下，这是确保 window 对象正确加载并设置以避免一些common issues in Gatsby using global objects.

【讨论】：

不幸的是，这没有帮助:(它只在我在特定路线上时才有效，或者我会在任何页面上执行 ctrl + f5，而不是加载带有地图的小部件。最糟糕的是在我单击打开 css 和 html 的按钮后，只是地图没有显示。我添加了重新创建此问题的 github repo 的链接。