Question

这是对以下问题的后续问题： How do I find out the DOM node at cursor in a browser’s editable content window using Javascript?

Tim Down 回答了这个问题。

获取插入位置的父元素（没有选择），IE中的iframe内部有一个问题（在firefox中效果很好）。

以下是该答案的部分代码：

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

其中ob是：

document.getElementById('myIframe').contentWindow;

iframe的outerHtml（用于测试）：

 "<!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>");

因此，当您在任何单词上放置插入符号时，结果为“空白”。

我希望你解决的另一个问题：
如果你选择“我是粗体”里面的部分，那么返回的父元素是 “我很大胆”（b元素）是否可以返回P元素？（当然它也适用于其他案件）

更新

选择功能的调用是通过一个位于托管iframe的文档上的简单按钮临时进行的：

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

还有一个在负载下运行的Init（）函数设置iframe的outerHTML（虽然我觉得它不重要）：

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：
我尝试添加到按钮：unselectable =“on”，这会导致奇怪的异常，有时会返回正确的值，有时候即使插入符号处于同一位置也不会出现!!!

UPDATE3
经过更多的测试后我发现，当iframe失去焦点并且点击后ift从iframe中消失后，就会发生“异常”（点击它发生的状态我没有检查）按钮（如果它消失，结果为空白），如果它保持结果是如预期的那样。）所以问题是如何在iframe中保持插入无关紧要？

Answer 1

所以问题是如何将插入符号保持在iframe内部无关紧要？

在按钮上指定mousedown事件。这将在从iframe中删除插入符号之前触发。但它只能工作一次，因此将对象的引用保存到变量中是一个好主意。

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

Answer 2

您应该真正尝试range classes中的Google Closure library。

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

在IE中获取iframe内部（使用designmode）的插入位置的父元素

2 个答案: