理解DOM对象生命周期

开发
1

大家好。我正在尝试解决一个关于 DOM 对象生命周期的问题。我阅读了该主题 https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347，但它仍然无法帮助我回答问题，或者至少为我指明解决问题的方向。我很难理解它。

我编写了一个非常简单的插件，作为外部服务（具体来说是 Rumbletalk 聊天引擎）的包装器。该插件可以按我想要的方式工作，聊天也能正常进行，但如果您从聊天页面导航到我网站的其他部分，然后再返回聊天页面，就会出现问题。我收到了他们包含的 JavaScript 抛出的错误，提示我正在尝试创建一个重复的聊天。

该插件是一个简单的 hbs/widget，它创建了以下 HTML：

<div style="height: 500px;">
  <div id="$MY_ID"></div>
  <script src="https://rumbletalk.com/client/?$MY_OTHER_ID"></script>
</div>

并且还包含一些登录 JavaScript。

我假设渲染的 HTML 仍然存在于 DOM 的某个位置，当这个脚本标签再次加载并运行时，它会检测到这一点。当我在开发控制台中进行调试时，我看到错误是从脚本标签中的 JavaScript 抛出的，而不是登录代码。

我已经联系了 Rumbletalk 的工作人员，但尚未收到回复。有人有什么建议，我接下来可以看什么？我唯一能做的就是添加一个 window.onerror 处理程序，然后执行 location.reload()。这显然不是一个好的解决方案。有没有办法在我离开页面焦点时“刷新”聊天引擎 DOM 对象？

感谢任何帮助。

-=Bob

2

嘿 Bob :wave:

您的问题有点超出 HTML 的范畴

`

`

此脚本运行一个 IIFE，初始化一个实例，并将该实例存储在全局作用域中。由于 Discourse 是一个单页应用程序，全局作用域在整个会话中是相同的。您可以在脚本首次加载后使用以下命令进行检查：

console.log(RumbleTalkChat)

因此，脚本抱怨的是 RumbleTalkChat["$MY_OTHER_ID"]

if (e.RumbleTalkChat[a.hash]) {
  throw new Error("Trying to create a duplicate chat with code: " + a.hash);
}

您可以尝试在脚本再次加载之前使用类似以下方法删除该实例：

delete RumbleTalkChat["$MY_OTHER_ID"]

请注意，它不包含 ? 字符。

话虽如此，您最好还是找出脚本为什么会被加载多次。我看到脚本有一个 openChat() 方法可以调用。因此，多次加载脚本可能不是必需的。

不幸的是，在我们可以确定原因之前，您需要提供有关嵌入位置以及如何添加标记的更多详细信息。

4 个赞
3

嗨 Joe
感谢您对 IIFE 的解释，我猜是这样的，或者，正如标题所示，是一个 DOM 范围的对象。 我确实看到了检查

if (e.RumbleTalkChat[a.hash]) {
  throw new Error("Trying to create a duplicate chat with code: " + a.hash);
}

也在模块中。 该模块与小部件渲染的其余页面一起加载。 我将看看是否可以将它移到初始化程序中，然后只渲染表单。

再次感谢，继续前进！

2 个赞