在不使用 contenteditable 的情况下，防止在 Firefox 的 iframe 中选择变灰答案

【问题标题】：Prevent selection being greyed out in iframe in Firefox without using contenteditable在不使用 contenteditable 的情况下，防止在 Firefox 的 iframe 中选择变灰
【发布时间】：2011-10-07 12:45:59
【问题描述】：

在 Firefox 3 及更高版本（可能还有更早的版本）中，在 iframe 中选择内容似乎总是使用用于当前没有焦点的文档的灰色选择背景颜色，即使 iframe 确实有焦点。我能找到的唯一例外是 iframe 中的内容是可编辑的。在其他浏览器中不是这种情况。这是一个说明这一点的示例：

http://jsfiddle.net/97Vjz/

不幸的是，这会阻止使用 ::-moz-selection CSS 伪元素在 iframe 中设置选择的样式，因为它仅适用于非灰色选择：

http://jsfiddle.net/YYXSY/1/

我的问题是：是否可以使用contenteditable / designMode 来防止 iframe 的选择在 Firefox 中变为灰色没有？

更新

这似乎只发生在动态编写的 iframe 上：使用单独的文件和 src 属性可以解决问题。但是，我确实需要它来处理动态编写的 iframe。

【问题讨论】：

标签： javascript css firefox iframe selection

【解决方案1】：

假设：似乎对于动态编写的 iFrame，要么呈现 XUL iframe，要么 Gecko 引擎不支持样式。

没有提交错误，我能看到的唯一解决方法是将我们的内容包装在 textarea 中并将其设置为“不可见”：http://jsfiddle.net/mrchief/YYXSY/19/

【讨论】：

在某种程度上这是一个合理的解决方法，但我确实需要 iframe 中的 HTML 内容，而不仅仅是 textarea 中的文本。
嗯，是的。我建议只换行。您仍然可以在其周围放置 html，并将内部文本包裹在 textarea 中。

【解决方案2】：

我只是尝试将“真实”页面作为 iframe 内容重现该问题，然后它可以像您想要的那样工作：蓝色选择！ (FF 5.0)

见：http://jsfiddle.net/97Vjz/8/

好像只有生成的内容有这个问题，所以你可以制作一个页面（php/asp(x)）来为你生成内容来规避这个问题。

使用 javascript 生成内容的另一种解决方案是使用 src="javascript:'<html />'" 加载它（实际上这是 Tim 自己从下面的 cmets 中获得的解决方案。）

一个简单的示例脚本：http://jsfiddle.net/97Vjz/9/

 iframe.src='javascript:\'<html><body>' + content + '</body></html>\'';

【讨论】：

你说得对，谢谢。有趣的。我确实需要它来处理动态创建的 iframe。我会做更多的研究。
刚刚从另一个域加载了一个页面，它没有问题。只有您的 js 生成的内容会这样做，我什至尝试使用完全相同的内容（doctype、xmlns 等），从 javascript 生成，并且仍然显示为灰色选择...
有趣的变化：jsfiddle.net/u42cq。可能可用于创建一个空的 shell 页面，然后使用 DOM 方法而不是 document.write() 填充该页面。
Firefox“查看框架源”因此对于 iframe 是空的，但它可以工作。不错的解决方案，甚至应该在 IE 中工作
我将 src="javascript:'html'" 解决方案添加到我的答案中以供将来参考。

【解决方案3】：

Firebug 的 DOM 检查器contentDocument->designMode 中公开了 iframe 的一个属性，该属性为您的 iFrame 设置为 false。通过 DOM 检查器将其强制为 true 会启用您所追求的蓝色突出显示。

【讨论】：

我可能错了，但他的问题表明他实际上不喜欢使用contenteditable。
我实际上在问题中提到了designMode。它与contentEditable 对整个文档的作用相同，这是我想要避免的。