iframe编辑器光标位置插入内容方法，兼容IE和Firefox

最新推荐文章于 2021-06-10 15:08:53 发布

阿_布

最新推荐文章于 2021-06-10 15:08:53 发布

阅读量159

点赞数

分类专栏： JavaScript 文章标签： IE Firefox 浏览器 Chrome HTML

本文链接：https://blog.csdn.net/zhoupuyue/article/details/83739712

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<html>  
<iframe id="x" name="x"></iframe>   
<input type="button" οnclick="t()" value="test">   
<input type="button" οnclick="frames['x'].location.href='about:blank';" value="clear">
<script>   
//setTimeout('window.frames["x"].document.designMode="On"',200);  
function t(){  
   window.frames["x"].document.designMode="On";
   var html = '<b style="color:red">'+$('xx').value+'</b>';      //插入的内容(html)，可以是图片。  
   if(getBrowser()=='ie'){  
        var Editor = window.frames["x"];   //IE获取iframe方法，否则图片位置跑到页面顶上去了。  
        Editor.focus();  
        o=Editor.document.selection.createRange();  
        o.pasteHTML(html);  
   }else if(getBrowser()=='chrome'){  
        var Editor = $('x');   //firefox要通过这种方式获取节点才行  
        Editor.focus();  
		//alert(Editor.contentWindow.getSelection().getRangeAt(0));
        var rng = Editor.contentWindow.getSelection().getRangeAt(0);
        var frg = rng.createContextualFragment(html);  
        rng.insertNode(frg);
    }  
}  
//获取浏览器版本  
function getBrowser(){  
    var agentValue = window.navigator.userAgent.toLowerCase();  
    if(agentValue.indexOf('msie')>0){  
        return "ie";  
    }else if(agentValue.indexOf('firefox')>0){  
        return "ff";  
    }else if(agentValue.indexOf('chrome')>0){  
        return "chrome";  
    }  
}  
function $(id){  
   return document.getElementById(id);  
}  
//根据元素className属性获取元素，如果有多个元素样式类名相同，可以用index指定返回第几个元素，第一个为1  
function getNodeByClassName(vclassname,index){  
    //var allnodes = document.all;  
    var allnodes = document.getElementsByTagName("*");  
    var x = 0;  
    for(var i=0;i<allnodes.length;i++){  
        if(allnodes[i].className==vclassname){  
         if(index!="undefined"){  
                 x++;  
         if(x<index){  
                    continue;  
         }  
         }  
             return allnodes[i];  
    }  
    }  
}  
</script>   
输入： <input id="xx">

阿_布

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe编辑器光标位置插入内容方法，兼容IE和Firefox

&lt;html&gt; &lt;iframe id="x" name="x"&gt;&lt;/iframe&gt; &lt;input type="button" onclick="t()" value="test"&gt; &lt;input type="button" onclick
复制链接

扫一扫

专栏目录