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

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • JS加载iFrame出现空白问题的解决办法

    在使用IE6浏览器开发过程中出现各种奇葩问题,非常棘手,费劲脑汁终于问题解决.特此把我的问题描述及解决办法分享到我们平台,帮助那些遇到此问题的朋友. 1.js加载iframe出现空白 iframeID 是加载的 Iframe ID号,修改成自己用的即可. <iframe name="frames" id="iframeID" src=""/> setTimeout("document.frames['"+ifram

  • js检测iframe是否加载完成的方法

    本文实例讲述了js检测iframe是否加载完成的方法.分享给大家供大家参考,具体如下: 这里是继上一篇<js实现iframe框架取值的方法(兼容IE,firefox,chrome等)>的扩展应用: 应用场景:iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外,还没找到更有效的办法),但是有时候我们不知道这个iframe页面是否执行完毕,有没有办法判断iframe里的页面是否load完成了呢? iframe1.html: <html> &

  • iframe中子父类窗口调用JS的方法及注意事项

    一.前言 我页面用的是EasyUI的弹出窗口里面嵌入一个iframe. 第一:父窗口打开子窗口是一个新增用户信息的iframe子页面,点击保存后,子窗口iframe则去调用父窗口的function closeAddWindow()方法,让父窗口去关闭新增页面: 第二:父窗口打开一个设置用户权限的iframe子窗口,首先打开这个子窗口会全部加载数据库表中所有的存在的权限,然后子窗口需要把加载的权限信息拼接html  Append到一个ID为<table id="tb"><

  • JS实现iframe自适应高度的方法(兼容IE与FireFox)

    本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: 之前一直被iframe自适应高度的问题困扰,很多JS代码在FF里面似乎就变成哑巴了.后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来.我已经用过了,真的好用.尤其是对于我这样的JS水平较低(真不好意思)的人来说,这段代码简单易懂,方便修改,只要把下面的代码复制粘贴到iframe所在页面的<body>标签里面,并且修改一下ID名就行了(注意,要修改的地方有两个,位置在代码中有说明). 向原创这段代码

  • 基于JS判断iframe是否加载成功的方法(多种浏览器)

    推荐阅读: JS iFrame加载慢怎么解决 在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来.这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面: ie浏览器 IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在elem内容发送变化的时候触发,比如内容正在载入loading会触发,

  • javascript实现 在光标处插入指定内容

    <TEXTAREA ROWS="20" COLS="100" id='test'>123456798<B>123</B></TEXTAREA> <INPUT TYPE="button" value='insert("abc")' OnClick='_insertText("abc")'> <SCRIPT LANGUAGE="Java

  • JS在可编辑的div中的光标位置插入内容的方法

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

  • js实现刷新iframe的方法汇总

    javascript实现刷新iframe的方法的总结,现在假设存在下面这样一个iframe,则刷新该iframe的N种方法有: 复制代码 代码如下: <iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe> 第一种方法:用iframe的name属性定位 复制代码 代码如下: <input type="button" name="B

  • javascript开发随笔3 开发iframe富文本编辑器的一点体会

    就把遇到的问题记录一下.写这篇文章时用的TinyMCE编辑器就很强大,但毕竟是第三方的,项目也考虑了这些,如果做些自定义的东西不太方便. 1. 判断光标位置的元素(或者选中的部分)的样式.光标位置改变的时候更新工具栏对应按钮的样式.什么情况下光标的位置会改变呢?是键盘方向键和鼠标点击,于是就判断键盘事件和鼠标事件来执行光标移动的处理. a. 获得光标位置或选中元素:首先getSelection,创建range.然后获得元素,获取到元素之后就可以或得样式.tagName等等,做更多的操作,运行代码

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

    本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法.分享给大家供大家参考,具体如下: <html> <iframe id="x" name="x"></iframe> <input type="button" onclick="t()" value="test"> <input type="button" onclick=

  • jquery实现在光标位置插入内容的方法

    本文实例讲述了jquery实现在光标位置插入内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>  <head>      <title>无标题页</title>      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>     

  • 基于jQuery的输入框在光标位置插入内容, 并选中

    复制代码 代码如下: // //使用方法 //$(文本域选择器).insertContent("插入的内容"); //$(文本域选择器).insertContent("插入的内容",数值); //根据数值选中插入文本内容两边的边界, 数值: 0是表示插入文字全部选择,-1表示插入文字两边各少选中一个字符. // //在光标位置插入内容, 并选中 (function($) { $.fn.extend({ insertContent: function(myValue,

  • JS实现在文本指定位置插入内容的简单示例

    实例如下所示: function insertAtCursor(myField, myValue) { //IE 浏览器 if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; sel.select(); } //FireFox.Chrome等 else if (myField.selectionStart || myField.selection

  • vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html: <div class="mouse-move fl f12 h22 lh22 mg-r5 sms-item" @dragstart="dragStart($event, item.labelName)" draggable='true' v-for="(item, index) in modelCommonList" :key="index" @click=&quo

  • C#实现winform中RichTextBox在指定光标位置插入图片的方法

    本文实例讲述了C#实现winform中RichTextBox在指定光标位置插入图片的方法.分享给大家供大家参考,具体如下: //获取RichTextBox控件中鼠标焦点的索引位置 int startPosition = this.richTextBox1.SelectionStart; //从鼠标焦点处开始选中几个字符 this.richTextBox1.SelectionLength = 2; //清空剪切板,防止里面之前有内容 Clipboard.Clear(); //给剪切板设置图片对象

  • JQuery在光标位置插入内容的实现代码

    复制代码 代码如下: (function($){ $.fn.extend({ insertAtCaret: function(myValue){ var $t=$(this)[0]; if (document.selection) { this.focus(); sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if ($t.selectionStart || $t.selection

  • javascript控制在光标位置插入文字适合表情的插入

    直接上代码吧,用js控制在光标位置插入. 在实现表情的插入时用到了. 复制代码 代码如下: <span style="font-size:18px;"><html> <head> <script type='text/javascript'> function test(str){ var tc = document.getElementById("mytextarea"); var tclen = tc.value.

  • JavaScript实现数组在指定位置插入若干元素的方法

    本文实例讲述了JavaScript实现数组在指定位置插入若干元素的方法.分享给大家供大家参考.具体如下: 我们可以通过JS数组的splice方法在执行的位置插入新的元素,非常简单 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to add elements to the array. </p> <button onclick="myFu

随机推荐