CODEWITHSUNDEEP
javascript
markiz
markiz

Reputation: 2184

Get the parent element of caret position inside iframe (with designmode on) in IE

This is a follow-up question to the: How do I find out the DOM node at cursor in a browser’s editable content window using Javascript?

That was answered by Tim Down.

There is a problem getting parent element of caret position (without selecting), inside iframe in IE (in firefox it works great).

Here is the partial code from that answer:

   if (ob.document.selection && ob.document.selection.createRange) {         
         range = ob.document.selection.createRange();        
         alert(range.parentElement().innerHTML); //I get blank
         return range.parentElement();    
    }

where ob is: 

document.getElementById('myIframe').contentWindow;

The iframe's outerHtml (for testing):

 "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>" +
            "<html xmlns='http://www.w3.org/1999/xhtml'>" +
            "<head>" +
            "<title>testing</title>" +           
            "</head>" +
            "<body><p>some text for testing<b>I am bold</b> more testing</p>"+
            "<p>blablabla</p>" +
            "<p>121213134</p></body>" +
            "</html>");

So when you place caret on any word, the result is "blank".

Another issue I would like you to address:
if you select section inside "I am bold", the parent element that being returned is "I am bold" (the b element).
Is it possible to return the P element instead? (ofcourse it should work for other cases as well)

Update:

The call to the selection function is made , temporary, by a simple button that is located on document that hosts the iframe:

<input type="button" value="test" onclick="getElementInRange()"/>

Also there is Init() function that run at load that sets iframe's outerHTML (though i don't think it's important):

function Init() {
        document.getElementById('myIframe').contentWindow.document.designMode = "on";


        document.getElementById('myIframe').contentWindow.document.open("text/html", "replace");
        document.getElementById('myIframe').contentWindow.document.write(//*Here comes the string from above...*

        document.getElementById('myIframe').contentWindow.document.close();
    }

Update2:
I tried adding to the button: unselectable="on", this causes strange anomaly some times it returns the right value ans some times it doesn't even if the caret in same position!!!

Update3
after more testing I've found out that the "anomaly" happens when iframe loses focus and caret disappears from the iframe after clicking (on what state of click it happens i didn't check)the button (if it disappears the result is blank, if it stays the result is as expected).
So the question is how to keep caret inside iframe NO MATTER WHAT?

Upvotes: 1

Views: 2153

Answers (2)

Richard Ek
Richard Ek

Reputation: 41

So the question is how to keep caret inside iframe NO MATTER WHAT?

Assign a mousedown event on the button. This will be triggered before caret is removed from iframe. But it will only work once so its a good idea to save a reference to the object into a variable.

$("button").mousedown(function(){ parent = getSelectionContainerElement(); });

Upvotes: 1

Annie
Annie

Reputation: 6631

You should really try the range classes from the Google Closure library.

goog.require('goog.dom.Range');
var range = goog.dom.Range.createFromWindow(ob);
return range.getStartNode().parentNode;

Upvotes: 0

Related Questions