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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
详解Vue中CSS样式穿透问题
Sep 12 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无敌近乎加密方式!
2010/07/17 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
在vue中安装使用vux的教程详解
2018/09/16 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
办公室文书岗位职责
2013/12/16 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
写给老师的表扬信
2014/01/21 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
商务司机岗位职责
2015/04/10 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS