嵌入式网站卡在“加载讨论”

支持
1

您好！在尝试将 Discourse 嵌入到我们的 NextJS Web App 时，我遇到了这个问题。我已经尝试从已有的、涉及相同错误的帖子中寻找答案，但未能解决我的问题。

这是我们的嵌入代码的样子：

<script id="discourse" type="text/javascript" data-nscript="afterInteractive">DiscourseEmbed = {
              discourseUrl: 'https://qanvast.discourse.group/',
              discourseEmbedUrl: 'https://web-uat.qanvast.com/sg/interior-design-singapore/forefront-interior-the-alcove-26226?image=769596',
              // className: 'CLASS_NAME',
            };

            (function() {
              var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
              d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
              (document.getElementsByTagName('head')[0]
              || document.getElementsByTagName('body')[0]).appendChild(d);
            })();</script>

在前端，它一直卡在“加载讨论中…”的界面。起初我以为是 CSP 的问题，但我已经将域名添加到嵌入允许列表中了。控制台日志和网络调用中都没有显示任何错误。

我已经卡在这里好几个小时了，所以任何帮助都将不胜感激。

1 个赞
2

您好 @Edrian_C_Bertulfo，欢迎 :wave:

您是否关注了此主题？这是操作方法，但我不知道它是否适用于 NexJS Web 应用……

3

你好莉莉！

感谢您的回复。我确实遵循了该帖子的说明，但仍然被无限的“正在加载讨论…”问题困扰。

1 个赞
4

你弄明白了没有？

5

我也遇到了使用 next.js 的这个问题。在首次加载时（在创建主题之前），它会卡在“正在加载讨论”状态。如果我刷新，评论/开始讨论就会显示出来——所以对我来说，主题创建得很好，但它没有更新加载状态（必须刷新才能显示带有评论框的更新状态）。

如果有一个回调函数或其他方式可以告知主题已创建，那就太好了，因为不得不刷新页面并不理想。我不知道使用 iframe 是否可行。

6

嗯，即使在主题创建之后，它实际上也从未加载过……
至少对我来说是这样。

有什么建议吗？

7

这是我下次应用中的内容。它的工作方式如我之前提到的——必须按刷新。如果它有效，请告诉我。

有时我需要刷新几次，或者等待一段时间再刷新，才能通过“加载讨论”消息。

<DiscourseComments
          discourseUrl="https://discourseurl.com/"
          discourseEmbedUrl={embedUrl}
          username="system"
        />

组件：

"use client"

import { useEffect, useRef } from "react"

/**
 * A React component to embed Discourse comments on a website
 *
 * @param {Object} props - Component props
 * @param {string} props.discourseUrl - The URL of your Discourse instance (including trailing slash)
 * @param {string} [props.discourseEmbedUrl] - The URL of the current page (for auto topic creation)
 * @param {number} [props.topicId] - ID of an existing Discourse topic (alternative to discourseEmbedUrl)
 * @param {string} [props.username] - Username for topic creation
 * @param {string} [props.className] - CSS class name to add to the embed
 * @param {string} [props.referrerPolicy] - Referrer policy for the iframe
 */
export default function DiscourseComments({
  discourseUrl,
  discourseEmbedUrl,
  topicId,
  username,
  className,
  referrerPolicy = "no-referrer-when-downgrade",
}) {
  const initialized = useRef(false)

  useEffect(() => {
    // Prevent duplicate initialization
    if (initialized.current) return
    initialized.current = true

    // Validate required props
    if (!discourseUrl) {
      console.error("DiscourseComments: discourseUrl is required")
      return
    }

    if (!discourseEmbedUrl && !topicId) {
      console.error("DiscourseComments: Either discourseEmbedUrl or topicId must be provided")
      return
    }

    // Configure the Discourse embed
    const config = {
      discourseUrl,
      discourseReferrerPolicy: referrerPolicy,
    }

    if (discourseEmbedUrl) {
      config.discourseEmbedUrl = discourseEmbedUrl
    }

    if (topicId) {
      config.topicId = topicId
    }

    if (className) {
      config.className = className
    }

    // Set the global DiscourseEmbed object
    window.DiscourseEmbed = config

    // Load the Discourse embed script
    const script = document.createElement("script")
    script.type = "text/javascript"
    script.async = true
    script.src = `${discourseUrl}javascripts/embed.js`
    document.head.appendChild(script)

    // Cleanup
    return () => {
      document.head.removeChild(script)
      delete window.DiscourseEmbed
    }
  }, [discourseUrl, discourseEmbedUrl, topicId, className, referrerPolicy])

  return (
    <>
      <div id="discourse-comments"></div>
      {username && <meta name="discourse-username" content={username} />}
    </>
  )
}