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

前端技术 2023/09/02 JavaScript

本文实例讲述了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指定返回第几个元素，第一个为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\">

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

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

本文地址：https://www.stayed.cn/item/5570

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案