(转)FireFox、IE得到iframe编辑框的光标位置并插入图片
2010-12-18 14:29
在制作html编辑器，有些时候iframe编辑器需要在光标处插入图片。firefox和ie有差别的。如下：
//FireFox
var obj = document.getElementByIdx_x_x("SendMsg");//iframe框架的
var win = obj.contentWindow;
var sel=win.getSelection(),rng=sel.getRangeAt(0),frg=rng.createContextualFragment(要在光标处插入的内容);
rng.insertNode(frg);
//IE
var obj = document.frames("SendMsg");
obj.focus();
var range =obj.document.selection.createRange();
var str1="要在光标处插入的内容";
range.pasteHTML(str1);
参考：http://www.code-design.cn/blogdetail2641.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>HTML编辑失去焦点后在原来光标位置插入信息/图片--编程设计网</title>
</head>
<body>
<br ><iframe style="width:300px;height:200px" id="editor"></iframe>
<br >内容：<input type="text" id="txt" onmousedown="SaveRange()" /><input type="button" onclick="insert()" onmousedown="SaveRange()" value="插入输入的字符在HTML编辑器原位置" />
<script type="text/javascript">
var isIE=!!document.all,ieRange=false,editor,win,doc,txt;
window.onload=function(){
editor=document.getElementByIdx_x('editor');
win=editor.contentWindow;
doc=win.document;
txt=document.getElementByIdx_x('txt');
doc.designMode='On';//可编辑
win.focus();
}
function SaveRange(){//IE下保存Range对象
if(isIE&&!ieRange){//是否IE并且判断是否保存过Range对象
var sel=doc.selection;
ieRange=sel.createRange();
if(sel.type!='Control'){//选择的不是对象
var p=ieRange.parentElement();//判断是否在编辑器内
if(p.tagName=="INPUT"||p==document.body)ieRange=false;
}
}
}
function insert(){
if(txt.value==''){alert('请输入内容！'); txt.focus();return false;}
if(ieRange){
ieRange.pasteHTML(txt.value);
txt.value='';
ieRange.select();ieRange=false;//清空下range对象
}
else{//焦点不在html编辑器内容时
win.focus();
if(isIE)doc.body.innerHTML+=txt.value;//IE插入在最后
else{//Firefox
var sel=win.getSelection(),rng=sel.getRangeAt(0),frg=rng.createContextualFragment(txt.value);
rng.insertNode(frg);
}
}
}
</script>
</body>
</html>
分享到：
相关推荐
iframe插入图片，firefox和ie区别以及asp.net中URLRewriter组件使用，都是经过测试的。
本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法。分享给大家供大家参考，具体如下： <html> <iframe id="x" name="x"></iframe> <input type="button" onclick="t()" value="test"&...
兼容火狐和IE插入图片的js代码，IE9不兼容showModalDialog的处理方法。
"Firefox IE Tab"是一款专为火狐浏览器设计的扩展，它允许用户在Firefox中以Internet Explorer内核的方式浏览网页。这个扩展对于那些需要在不同浏览器环境中测试网站兼容性的开发者或者经常在两个浏览器间切换的用户...
标题中的"IETab"是一个Firefox浏览器插件，它允许用户在Firefox中直接使用Internet Explorer（IE）的渲染引擎来打开网页。这个插件对于那些必须访问仅支持IE特性的网站的用户来说非常有用，因为某些老旧或特定的Web...
本文将介绍如何在IE、Firefox和Chrome中获取div编辑框、textarea和input text光标位置的方法，并提供相应的代码示例。 首先，了解不同浏览器对于光标位置获取的支持情况是必要的。例如，IE浏览器使用了document....
总的来说，虽然`iframe`在Firefox中可能存在一些兼容性问题，但通过了解这些问题并采取适当的解决策略，我们可以确保在Firefox上提供良好的用户体验。随着浏览器的更新和标准的完善，大部分兼容性问题已经得到解决，...
### 在Textarea光标处插入...本文详细介绍了如何在`textarea`的光标位置插入文本的方法，包括IE和非IE浏览器的兼容性处理。通过分析提供的代码示例，我们不仅了解了其实现原理，还学习了如何在实际项目中应用这些知识。
本文主要探讨的是在Chrome、Firefox和IE浏览器中，`<input>` 输入框内光标位置出现错位的问题及其解决方案。 问题的起因在于开发者通常会为了美观或者功能需求，使用背景图片来模拟`<input>`输入框的样式，并通过...
本篇文章将深入探讨如何创建一个兼容IE和Firefox的Html在线编辑器，并涵盖相关的核心知识点。 首先，我们需要理解HTML的基础。HTML（HyperText Markup Language）是网页内容的结构化语言，用于定义页面的结构和内容...
通过精心编写和测试代码，我们可以创建一个能在IE6、IE7以及Firefox等浏览器中工作的编辑器，支持用户在任何位置浏览并插入表情。在实际项目中，我们可能还需要考虑其他浏览器，如Chrome、Safari和Edge，以及移动...
5. **兼容性**：良好的插件会确保其在各种浏览器（包括主流的Chrome、Firefox、Safari、Edge以及旧版本的IE）中都能正常工作。 6. **事件监听**：插件可能还提供监听光标位置变化的事件，帮助开发者在光标移动时...
在网页设计中，CSS（层叠样式表）的兼容性问题常常困扰着开发者，尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法： 1. **DOCTYPE声明**：DOCTYPE声明会...
在非IE浏览器中，如Firefox，我们可以使用`window.getSelection()`获取当前选区，并通过`Range`对象进行操作。以下是在非IE浏览器中插入字符的示例代码： ```javascript function insertAtCursorNonIE(obj, text) {...
### 解决多浏览器下IE6、IE7及Firefox中`<li>`元素间距兼容性问题 #### 背景介绍 在Web开发过程中，我们经常会遇到不同浏览器对CSS样式的解析差异导致页面显示效果不一致的情况。特别是对于早期版本的Internet ...
特别是在早期的Web时代，Internet Explorer（简称IE）与Mozilla Firefox（简称火狐）这两款浏览器之间存在着显著的差异，这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...