NS_ERROR_FAILURE 在 Firefox 中设置隐藏 iframe 内的画布字体答案

【问题标题】：NS_ERROR_FAILURE in Firefox on setting font of canvas inside a hidden iframeNS_ERROR_FAILURE 在 Firefox 中设置隐藏 iframe 内的画布字体
【发布时间】：2018-06-26 11:00:45
【问题描述】：

我正在尝试使用 canvas 创建一个文本编辑器。

要将光标放在正确的位置，我需要计算每个字符的宽度。

我在初始加载时缓存每个字符的宽度。

这在直接启动时在 Firefox 上运行良好，但在父级隐藏的 iframe 中启动时会引发错误 (NS_ERROR_FAILURE)。

我在小提琴here 中缩小了这个案例的范围。

谁能帮我解决这个问题的原因？

【问题讨论】：

标签： javascript html firefox iframe html5-canvas

【解决方案1】：

您不能将 iframe 设置为 display:none。如果你真的认为你需要一个隐形 iframe you can do this:

.frame-wrapper {
  z-index: -1231231;
  position:absolute;
  top:0; left:0;
  height:1px; width:1px;
  opacity:0;
}

但是，如果您所做的只是运行一个不可见的画布，您可以在 javascript 中做到这一点。

【讨论】：

这是我已经在做的。我的问题是，为什么 Firefox 不允许我在 CanvasContext 上设置任何值？
@mjzeus - 根据你的小提琴，你没有已经这样做了。您在导致初始错误的框架上有display:none。通过将其更改为opacity:0，您可以摆脱该错误。如果您对设置值有疑问，则需要包含更多信息，例如您从哪里设置值、父框架或子框架。我已经解决了你小提琴中的问题，我不会猜测所有可能的用途以及接下来可能出现的每个可能的错误。如果您还有其他问题，请发布另一个问题。