Question

你好。

我最近在我的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

Answer 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。

如何在Gatsby中的特定页面中加载脚本

1 个答案: