如何在Gatsby中加载特定页面中的脚本 [英] How to load script in specific page in gatsby
问题描述
您好。
我最近在我的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会以某种方式缓存它，并且大多数重要的功能都不起作用。那么，我是否可以仅当我在ROUTE/delivery上加载脚本？或者，有没有其他更好的方法来加载这个脚本，这样可能会运行得很好？
有此问题的GitHub回购链接：https://github.com/Exanderal/gatsby-problem
推荐答案
最简单、原生和内置的实现方式是使用<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中加载特定页面中的脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
