防止第三方更改DOM时我的Elm应用崩溃

如何解决防止第三方更改DOM时我的Elm应用崩溃

我有一个Elm应用程序。不久前，我意识到当我使用FontAwesome图标时，应用程序在本地崩溃。我了解到发生这种情况是因为我选择了SVG图标，因此FontAwesome正在修改DOM。这与Elm的VDOM机制冲突。

这很容易解决-我迁移到使用伪元素的CSS版本的FontAwesome。最近，一些用户抱怨生产中的应用程序冻结，他们显示了与我拥有的日志数据不匹配的状态的屏幕截图。我花了一段时间才意识到所有这些用户都让Google Translate自动为他们翻译了页面。 Google Translate clearly alters the DOM，因此Elm崩溃使我并不感到惊讶。

如何防止Elm应用崩溃？如果第三方更改了DOM，是否有通知的方法？这样我什至可以通知用户他们的扩展程序会干扰应用程序。

解决方法

我遇到了与您相同的问题，并通过迁移到Elm-FontAwesome库来解决了这个问题。基本上，您所需要做的就是替换此语法：

i [ Svga.class "fas fa-check" ] []

与此：

Icon.viewIcon Icon.check

您可以查看示例项目以了解更多详细信息：https://github.com/Lattyware/elm-fontawesome-example

看看这里 - How we made Elm and Google Translate work together。

他们的方法是使用下面的函数劫持 Elm 在 dom 更新期间调用的 Elm replaceData 方法。您可以在让 Elm 控制 dom 之前运行它。

HTMLFontElement.prototype.replaceData =
  function replaceData(_0,_1,string) {
    this.parentNode.replaceChild(
      document.createTextNode(string),this
    );
  };

显然，“谷歌翻译将 DOM 中的每个文本节点替换为一个至少包含一个标签的标签——每个句子一个标签”。例如：

<span>Insurello. Rätt ersättning till alla</span>

被翻译成

Insurello. The right compensation for everyone

此方法可避免尝试编辑跨度，而是将其替换为新的跨度。添加节点后，Google Translate 将翻译该文本。

我不知道如何防止崩溃，但是我认为您应该能够使用https://jonascheng.github.io/aws/2016/05/19/cognito-with-unauthenticated-identities/向DOM注册更改。

在此之前，像DOMSubtreeModified这样的几个current mutation observer API可能也有帮助，但不推荐使用。

这个问题与 Elm 中的 Google Maps 或 Google Places Autocomplete 问题密切相关。我过去使用的解决方案是提供一个没有子级的 div，其中包含一个我可以从 JavaScript 指向的 id。

因为 div 是无子节点的，Elm 不会深入内部检查它是否在内部发生了变化。

查看此 blog post 或谷歌“榆树地图”以获取有关如何执行此操作的说明

-- 编辑 -- 我已经更好地阅读了这个问题，这可能不适用于 Google 翻译问题，因为它会更改整个 DOM 中的所有文本。我把它留在这里，以防问题给其他人带来了当 3rd 方更改 DOM 时遇到更常见的问题

防止第三方更改DOM时我的Elm应用崩溃

如何解决防止第三方更改DOM时我的Elm应用崩溃

解决方法

相关推荐