reactjs - 如何在 gatsby 的特定页面加载脚本-6ren

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

转载作者：行者123 更新时间：2023-12-05 03:48:45

您好。

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

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

这是我加载脚本的方式:

{
  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

最佳答案

实现的最简单、 native 和内置的方法是使用 <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 是一个钩子(Hook)(在 React 版本 ^16 中可用)，一旦加载 DOM 树就会触发，在这种情况下，这是确保 window对象已正确加载并设置以避免某些 common issues in Gatsby using global objects .

关于reactjs - 如何在 gatsby 的特定页面加载脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64235074/

文章推荐： ios - 更改 UITableViewCell 上 accessoryView 的大小

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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