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

IT技术 reactjs gatsby
2021-04-29 01:41:21

你好。

我最近在我的 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 仓库：https : //github.com/Exanderal/gatsby-problem

1个回答

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

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

  1. <Helmet> 方法：

    <Helmet>
  <script src="https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js"/>
</Helmet>

    正如我所说，此解决方法可能适用于独立脚本，但如果您需要执行操作或等待其加载，它可能不起作用。下一个方法应该适合你。

  2. 自定义脚本加载方式：

     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对象正确加载和设置以避免Gatsby 中使用全局对象的一些常见问题的好方法。

其它你可能感兴趣的问题
上一篇在 React 中使用联系表 7 下一篇从数组 react-native 生成​​时，多个开关（切换开关）同时启用