Link to home
Start Free TrialLog in
Avatar of renisenbb
renisenbb

asked on

Javascript: In Firefox, selecting a text within an iframe makes text foreground color grey instead of blue

When my td element which is in an iframe, gets selected, it gets highlighted as grey. Outside of an iframe, it turns blue. Is there a solution that works for all browsers? The idea is to be able to copy the text using control-c
<p id="notiniframe">Hello</p>
<iframe id="myiframe"></iframe>
var el = document.getElementById("myiframe");
var editable=false;
var doc = el.contentDocument || el.contentWindow.document;
    doc.open();
    doc.write('<html><body onmousedown="window.focus();)" contenteditable="' + editable + '">Select some content</body></html>');
    doc.close();
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of renisenbe
renisenbe

This works in jsfiddle, but in my actual code, the html is generated. When i add "el.contentDocument.designMode="on";" for the element, it doesn't seem to make a difference. I still see grey.
I updated the code to include a paragraph within the iframe. When i do this, the selection stays grey
<input id="text" />
<p id="notiniframe">Hello</p>
<iframe id="myiframe"></iframe>
var el = document.getElementById("myiframe");
var doc = el.contentDocument || el.contentWindow.document;
    doc.open();
    doc.write('<html><body><p id="p1">Select some content</p></body></html>');
    doc.close();
    var elp = document.getElementById("p1");
elp.contentDocument.designMode="on";
Avatar of renisenbb

ASKER

It seems like designMode isn't ideal. If i copy the selected text, i can't paste it in a textbox somewhere else in the iframe.
Is there any other way to allow iframe text to get selected (blue).
That is all as far as I know - is there any particular reason why it must be blue?

It seems that it is only gray when the content is generated by the page - if you iframe an external page then apparently it does highlight blue - have not confirmed.
I wanted to be able to copy the text. When it's gray it can't get copied to the clipboard.
When it's gray it can't get copied to the clipboard.
I don't agree

Here is a link to a sample with your code http://www.marcorpsa.com/ee/t2365.html

Highlight text, right click and copy
Here is text I just copied from the iframe in that link
ect some co

Open in new window