Prevent selection being greyed out in iframe in Fi

2020-07-03 07:28发布

问题:

In Firefox 3 and later (and probably older versions), selecting content within an iframe always seems to use the grey selection background colour used for a document that doesn't currently have focus, even if the iframe does have focus. The only exception I have been able to find is when the content within the iframe is editable. This is not the case in other browsers. Here's an example illustrating this:

http://jsfiddle.net/97Vjz/

This unfortunately prevents styling the selection within an iframe using the ::-moz-selection CSS pseudo-element because it only applies to non-grey selections:

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

My question is: is it possible to prevent an iframe's selection being grey in Firefox without using contenteditable / designMode?

UPDATE

This only seems to happen on dynamically written iframes: using a separate file and the src attribute solves the problem. However, I do need it to work with dynamically written iframes.

回答1:

I just tried to reproduce the problem with a "real" page as iframe content and then it works like you want: blue colored selection! (FF 5.0)

see: http://jsfiddle.net/97Vjz/8/

It seems only generated content has this problem, so you could make a page (php/asp(x)) that generates the content for you to circumvent the problem.

Another solution to use javascript generated content is to load it with src="javascript:'<html />'" (actually this is Tim's own solution from the comments below.)

A simple example script: http://jsfiddle.net/97Vjz/9/

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


回答2:

There is a property of the iframe exposed in Firebug's DOM inspector contentDocument->designMode which is set to false for you iFrames. Forcing it to true through the DOM inspector enables the blue highlight you're after.



回答3:

Hypothesis: It seems that for dynamically written iFrames, either a XUL Iframe is rendered or the Gecko engine doesn't honor the styles.

Short of submitting a bug, the only workaround I can see is to wrap our contents in a textarea and style it to make it 'invisible': http://jsfiddle.net/mrchief/YYXSY/19/