JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

2019-11-20 09:36:41

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法。分享给大家供大家参考，具体如下：

<html><iframe id="x" name="x"></iframe><input type="button" onclick="t()" value="test"><input type="button" onclick="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指定返回第几个元素，第一个为1function 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">

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：jQuery模仿单选按钮选中效果

下一篇：jQuery如何获取动态添加的元素