javascript获取iframe中光标所在位置的父节点名称

项目背景：

最近在做一个客服聊天系统后台，聊天窗口中，有字体加粗，倾斜，下划线等等。这个效果可以在我的上一篇文章中简单的实现，具体请看javascript execCommand,复文本框神器，案例请看。

但是需求方有额外的要求，要求iframe中字体加粗的话，鼠标点在上面，我们按钮有选中状态。对于这个按钮的选中状态怎么办呢？

思路和方法：

一开始我想找到javascript execCommand的一个返回状态，但是最终以失败告终。

在和同事的研究交流过程中，找到了如下方法，封装了一个函数，从而获得iframe中选中的文本，及光标所在位置的父级元素的节点名称。

代码如下：

 var isIE = navigator.userAgent.indexOf("MSIE")>0;

var Q_EDITFORM_DOCUMENT = null;
var Q_SELECTION = null;
var Q_RANGE = null;
var Q_RANGE_TEXT = "";

function getParentNode()
{
        if(isIE)
        {
                return document.selection.createRange().parentElement();
        }
        else
        {                
                var startRangeNode = Q_RANGE.startContainer;
                if (startRangeNode.nodeType == 3) 
                {
                        var textNode = startRangeNode;
                        startRangeNode = textNode.parentNode;
                } 
                else 
                {
                        if (startRangeNode.tagName.toLowerCase() == 

'html') 
                        {
                                startRangeNode = 

startRangeNode.childNodes[0].nextSibling;
                        } 
                }
                return startRangeNode;
        }
}

//插入div的相关处理函数
function QEditformDocument()
{
        if (isIE) 
        {
                Q_EDITFORM_DOCUMENT = document;
        } 
        else 
        {
                Q_EDITFORM_DOCUMENT = document;
        }
}

function QSelection()
{
        if (isIE) 
        {
                Q_SELECTION = Q_EDITFORM_DOCUMENT.selection;
                Q_RANGE = Q_SELECTION.createRange();
                Q_RANGE_TEXT = Q_RANGE.text;
                //alert(Q_RANGE_TEXT);
        } 
        else 
        {
                Q_SELECTION = Q_EDITFORM_DOCUMENT.getSelection();
        Q_RANGE = Q_SELECTION.getRangeAt(0);
                Q_RANGE_TEXT = Q_RANGE.toString();
                //console.dir(Q_RANGE_TEXT);
        }
}

使用方法：

        //HtmlEditor为编辑器iframe的id
        //调用getParentNode()前必须初始化文档对象
        QEditformDocument();
        QSelection();
        var parentobj = getParentNode();
          console.dir(parentobj);
        //parentobj是一个object,获取它的名称，用parentobj.tagName就可以获取到元素的名称，注意，名称是大写的！！

demo案例预览

输出可以用谷歌浏览器查看console ,alert看不清楚。

小结

通过这个方法，我们可以很简单的制作出加粗，倾斜，和下划线等的选中效果了。这个效果我已经在项目中实现了，具体demo没有写！大家可以看我开头的这个案例请看 案例，结合案例预览这个案例，当选择某个文字或者标签的时候，给相应加粗，倾斜和下划线等一个不一样的样式，就可以做到了！