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


Posted in Javascript onJune 24, 2016

本文实例讲述了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 相关文章推荐
jQuery 操作option的实现代码
Mar 03 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
jQuery如何获取动态添加的元素
Jun 24 #Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 #Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 #Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 #Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 #Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 #Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 #Javascript
You might like
第三章 php操作符与控制结构代码
2011/12/30 PHP
yii添删改查实例
2015/11/16 PHP
js 页面输出值
2008/11/30 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
Numpy的简单用法小结
2019/08/28 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
美国性感女装网站:bebe
2017/03/04 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
什么是岗位职责
2013/11/12 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
主要负责人任命书
2014/06/06 职场文书
学生党员检讨书范文
2014/12/27 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
多人股份制合作协议书
2016/03/19 职场文书