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

24616次浏览

项目背景:

最近在做一个客服聊天系统后台,聊天窗口中,有字体加粗,倾斜,下划线等等。这个效果可以在我的上一篇文章中简单的实现,具体请看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没有写!大家可以看我开头的这个案例请看 案例,结合案例预览这个案例,当选择某个文字或者标签的时候,给相应加粗,倾斜和下划线等一个不一样的样式,就可以做到了!

Tags: javascriptiframe节点

相关文章: