邮递窗口未定义

发布于 2025-02-13 04:06:47 字数 832 浏览 0 评论 0原文

我正在尝试从FormStack中实现一种形式解决方案,以进入我的React/Gatsby网站。为此,我需要使用postscribe注入外部脚本。我已经跟随了其他几个人,并且在本地有一个工作版本,其中包含以下代码:

import postscribe from postscribe

...

useEffect(() => {
    if (advRef) {
      if (window !== undefined) {
        postscribe(
          advRef.current,
          "<script src=...myformurl...><\/script>",
        )
      }
    }
  }, [advRef])

...
        
<div id="adv" ref={advRef}></div>

但是,这在生产中不起作用,并且会抛出reference> referenceerror:window错误。我之前已经遇到过这个问题,如您所见,我尝试了IF窗口是定义的块,但这似乎没有帮助。

我在另一个问题中看到了在这里这与<<代码> postscribe 已导入。但是我似乎也无法在这里解决解决方案。

I am trying to implement a form solution from formstack into my React/Gatsby website. To do so, I need to use postscribe to inject an external script. I've followed a couple other people and I have a working version locally with the following code:

import postscribe from postscribe

...

useEffect(() => {
    if (advRef) {
      if (window !== undefined) {
        postscribe(
          advRef.current,
          "<script src=...myformurl...><\/script>",
        )
      }
    }
  }, [advRef])

...
        
<div id="adv" ref={advRef}></div>

However, this does not work in production and it throws a ReferenceError: window is not defined error. I have run into this before and as you can see I tried the if window is defined block, but that doesn't seem to help.

I saw in another question here that this has to do with how postscribe is imported. But I can't seem to get the solution here to work either.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

清欢 2025-02-20 04:06:47

我需要一种使用脚本标签加载脚本的方法,而不是下载节点软件包。这篇文章的答案有点了,但是据我所知,当Postscribe试图更改页面时,它与此有关。 idk为什么以这种方式有效,但我在盖茨比项目中做了以下内容。

  1. 安装gatsby-plugin-load-script
  2. 将以下内容添加到gatsby config
{
    resolve: 'gatsby-plugin-load-script',
      options: {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js'
     },
},
  1. 创建tsx component for Forms的tsx组件,看起来如下
import React, { useEffect, useRef } from 'react';
// import postscribe from 'postscribe';
declare let postscribe: any;

type Props = {
  externalScript: string,
  id: string
}

const Formstack: React.FC<Props> = ({externalScript, id}) => {
  const formRef = useRef(null)

  useEffect(() => {
    if (formRef) {
      if (typeof window !== "undefined") {
        postscribe(
          formRef.current,
          `<script src=${externalScript}><\/script>`,
        )
      }
    }
  }, [formRef])
  return (
    <div>
      <div>above the form</div>
      <div id={id} ref={formRef}></div>
      <div>below the form</div>
    </div>
  )
}

export default Formstack;

I needed a way to load the script using a script tag rather downloading the node package. The answer to this post goes into it a bit, but as far as I understand it has something to do with when postscribe tries to make changes to the page. Idk why this way works but I did the following in my Gatsby project.

  1. install gatsby-plugin-load-script
  2. Add the following to gatsby config
{
    resolve: 'gatsby-plugin-load-script',
      options: {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js'
     },
},
  1. create tsx component for forms that looks like the following
import React, { useEffect, useRef } from 'react';
// import postscribe from 'postscribe';
declare let postscribe: any;

type Props = {
  externalScript: string,
  id: string
}

const Formstack: React.FC<Props> = ({externalScript, id}) => {
  const formRef = useRef(null)

  useEffect(() => {
    if (formRef) {
      if (typeof window !== "undefined") {
        postscribe(
          formRef.current,
          `<script src=${externalScript}><\/script>`,
        )
      }
    }
  }, [formRef])
  return (
    <div>
      <div>above the form</div>
      <div id={id} ref={formRef}></div>
      <div>below the form</div>
    </div>
  )
}

export default Formstack;

听,心雨的声音 2025-02-20 04:06:47

尝试将检查从window!== Undfeined更改为 type> typeof window!==“ undefined” :

import postscribe from postscribe

...

useEffect(() => {
  if (advRef) {
    if (typeof window !== "undefined") {
      postscribe(
        advRef.current,
        "<script src=...myformurl...><\/script>",
      )
    }
  }
}, [advRef])


...

<div id="adv" ref={advRef}></div>

Try to change your checking from window !== undefined to typeof window !== "undefined":

import postscribe from postscribe

...

useEffect(() => {
  if (advRef) {
    if (typeof window !== "undefined") {
      postscribe(
        advRef.current,
        "<script src=...myformurl...><\/script>",
      )
    }
  }
}, [advRef])


...

<div id="adv" ref={advRef}></div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文