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 相关文章推荐
js实现简单模态窗口,背景灰显
Nov 14 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
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学习资源和链接.
2006/12/05 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python 通过exifread读取照片信息
2020/12/24 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
小学生操行评语
2014/04/22 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
庆七一宣传标语
2014/10/08 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
大学辅导员述职报告
2015/01/10 职场文书
跑出一片天观后感
2015/06/08 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书