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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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
Dedecms常用函数解析
2008/02/01 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
项目总经理岗位职责
2014/02/14 职场文书
主管会计岗位职责
2014/03/13 职场文书
酒店仓管员岗位职责
2014/04/28 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
初中新生军训方案
2014/05/13 职场文书
结对共建工作方案
2014/06/02 职场文书
质量管理标语
2014/06/12 职场文书
国际金融专业自荐信
2014/07/05 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
会议营销主持词
2015/07/03 职场文书