1

我有一个 Gatsby 网站，我正在尝试向其中添加第三方 js 小部件，但由于某种奇怪的原因，它只有在我手动刷新页面时才会加载。在第一页加载时，它就好像它根本不存在，开发工具中没有错误，什么都没有......但是如果我刷新页面，它就会出现。几乎就好像它是延迟加载？有没有办法强制加载？

我检查了开发工具中的elements、console和network选项卡，但没有任何迹象表明有任何错误。elements显示了我期望的标签，console什么都没有显示，所有network内容都显示为 200。

这可能是 Gatsby 和/或 Helmet 的问题吗？可能是，但我认为这不是小部件本身的问题（它是第三方，我无法控制它，请参阅最后一段）？

<Helmet
    script={[
        {
            type: 'text/javascript',
            src: '//widget-url.com/path/to/jsfile.min.js',
        },
        {
            type: 'text/javascript',
            innerHTML: `
               (function() {
                   var widget = Stuff.happens.here();
                   widget.Initialise();
                })();
            `,
        },
    ]}
/>

在我的身体里，我有：

<div id='widget-id'></div>

我试图了解问题所在的事情：

  • 正如我所提到的，我必须强制刷新小部件所在的页面。如果我强制刷新任何其他页面，它没有帮助。所以我尝试过的事情是：不仅将 JS 包含在相关页面的头部，我还会将它包含在所有页面上。但这并没有什么不同。

  • 我还尝试将小部件添加到一个简单的独立 html 文件中，小部件加载没有问题。这让我认为这可能不是小部件问题？

我不知道从这里去哪里:(

4

1 回答 1

1

问题是您指向的 DOM 元素在您请求脚本时可能会呈现也可能不会呈现。

在你的情况下，我会尝试：

<Helmet>
    <script async defer src="//widget-url.com/path/to/jsfile.min.js" />
    <script async defer>
     {`
      (function() {
          var widget = Stuff.happens.here();
           widget.Initialise();
         })();   
      `}
    </script>
</Helmet>

或者使用多个服务器端渲染 API 之一。onRenderBody应该管用：

// gatsby-ssr.js
import React from "react"
export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
  setHeadComponents([
    <script 
      src="//widget-url.com/path/to/jsfile.min.js"
      type="text/javascript"
      async
    />,
    <script
      dangerouslySetInnerHTML={{
      __html: `
        (function() {
         var widget = Stuff.happens.here();
          widget.Initialise();
        })();   
     `,
    }}
   />, 
 ])
}
于 2021-10-07T12:07:19.397 回答