场景与问题:
查看 demo:ff-iframe-bug
初始状态下 iframe 中的内容可编辑,可选中,当动态改变 iframe 的 position(即改变 layout )后,该 iframe 出现三个问题:
1. 不可编辑
2. 光标消失
3.原先选中区域(光标位置)丢失
分析与修复:
想不到一向稳重的 firefox 也会有这么折磨人的 bug,还好 ckeditor 已有完美解决方案,从纷繁芜杂的代码丛中理出来就是:
1.不可编辑,就重新设一遍 contentEditable
2.光标消失就绕一下:先由其它可获得焦点的元素获得焦点,然后 iframe 窗体以及 body 再获得焦点,最后惊奇发现光标回来了!不过到了编辑区最后 ....
3.丢失就要多保存:操作前保存选中区域以及光标位置(range),操作后再把保存的 range 设置回去。
查看demo:ff-iframe-fix
代码实例:
var savedRange = null;
//保存选择区域以及光标位置
function save() {
var sel = win.getSelection();
if (sel) {
savedRange = sel.getRangeAt(0);
}
}
function show() {
if (UA.gecko) {
//激活编辑与光标
body.contentEditable = false;
body.contentEditable = true;
a[0].focus();
win.focus();
body.focus();
//范围回复
var sel = win.getSelection();
sel.removeAllRanges();
sel.addRange(savedRange);
}
}
分享到:
相关推荐
然而,不同的浏览器对于`iframe`的支持程度和处理方式可能存在差异,尤其是在较早版本的Firefox中,可能会遇到一些兼容性问题。本篇文章将详细探讨`iframe`在Firefox中的兼容性挑战及其解决方案。 1. **Firefox对...
针对IFrame中Session丢失的问题,可以采取以下几种策略: 1. **使用StateServer模式管理Session:** 在Web.Config文件中配置`sessionState`元素,设置`mode`属性为`StateServer`,并指定`stateConnectionString`,...
Deepin Linux 安装最新版 Firefox火狐浏览器详解 在 Deepin Linux 操作系统中,安装最新版的 Firefox 火狐浏览器可以通过下载最新版的 Firefox 压缩包并解压缩来实现。下面是详细的安装步骤: 首先,用户需要在 ...
### 解决IE、Firefox、Chrome、Safari浏览器中iframe显示高度自适应问题 在Web开发中,`iframe`(Inline Frame)元素常被用于嵌入另一个HTML文档到当前页面中,这种技术为开发者提供了极大的便利,例如加载广告、...
火狐浏览器(Mozilla Firefox)是一款由Mozilla基金会和志愿者共同开发的开源网络浏览器,以其高度定制性、安全性和性能而受到用户欢迎。以下是一份描述: 火狐浏览器是一款跨平台的开源网络浏览器,由Mozilla基金...
标题中的"Firefox火狐浏览器官方Setup 45.0.2-win64版本exe安装包"表明这是官方发布的稳定版本,确保了软件的可靠性和安全性。"Setup 45.0.2.exe"是Windows下的可执行文件,用于启动安装程序,帮助用户无痛完成Fire...
《Firefox火狐浏览器45.0.2-win32版本详解》 Firefox,这款由Mozilla基金会开发的开源网络浏览器,自2004年首次亮相以来,就以其强大的功能、高度的可定制性和对用户隐私的重视赢得了全球用户的喜爱。在本文中,...
《Firefox火狐浏览器52.1.1esr-mac版本的深度解析与安装指南》 Firefox火狐浏览器,作为一款开源、免费的网络浏览器,以其强大的安全性、隐私保护及高度自定义性深受用户喜爱。52.1.1esr(Extended Support Release...
Firefox填写表单扩展 安装方法很简单,直接拖拽到火狐浏览器窗口中然后根据提示操作即可。 随时关注最新版: http://code.google.com/p/ffextension/downloads 火狐官方下载地址: ...
Firefox火狐浏览器是一款深受用户喜爱的开源网络浏览器,其官方Setup 45.0-win64版本是专为Windows 64位操作系统设计的。这个安装包提供了稳定、安全且功能丰富的网页浏览体验,旨在满足不同用户的需求。下面将详细...
标题中的“Firefox火狐浏览器官方52.0b2-win32版本exe安装包”指的是Mozilla Firefox的52.0b2预览版,专为Windows 32位操作系统设计的安装程序。Firefox是一款开源、免费的网络浏览器,以其安全、隐私保护和可定制性...
火狐firefox adblock xpi插件,adblock for macOS firefox,解决火狐浏览器安装adblock显示此页面在您的地区不可用问题,解压拖动到火狐浏览器即可安装,完美解决无法从插件市场安装的问题
《Firefox火狐浏览器51.0b2-win32版本:深入解析与使用指南》 Firefox,这款由Mozilla基金会开发的开源网络浏览器,以其强大的安全性能、高度的可定制性和出色的隐私保护机制,在全球范围内拥有大量的忠实用户。...
Firefox 52.0.2 渗透便携版 90SEC beta8 含多个文件 Firefox 52.0.2 渗透便携版 90SEC beta8 Firefox 52.0.2 渗透便携版 90SEC beta8 Firefox 52.0.2 渗透便携版 90SEC beta8 Firefox 52.0.2 渗透便携版 90SEC beta8...
《Firefox火狐浏览器52.9.0esr-win64版本详解》 Firefox火狐浏览器,是一款由Mozilla基金会开发的开源网络浏览器,以其高度定制化、安全性强、隐私保护出色而深受用户喜爱。本篇将详细介绍Firefox 52.9.0esr-win64...
《Firefox火狐浏览器52.0.1-win32版本:深入解析与使用指南》 Firefox火狐浏览器,由Mozilla基金会开发,是一款全球知名的开源网络浏览器。本文将围绕"Firefox火狐浏览器官方52.0.1-win32版本exe安装包"进行详细...
《Firefox火狐浏览器60.7.0esr-win64版本详解》 Firefox火狐浏览器,由Mozilla基金会开发,是一款开源、免费的网络浏览器,以其强大的安全性、隐私保护和高度可定制性著称。本资源提供的“Firefox火狐浏览器官方...
《Firefox火狐浏览器50.0-win32版本:官方安装包详解》 Firefox火狐浏览器,由Mozilla基金会开发,是一款全球广泛使用的开源网络浏览器。它以其强大的安全性、隐私保护和自定义功能著称,深受用户喜爱。"Firefox...
《Firefox火狐浏览器68.5.0esr-win64版本详解》 Firefox火狐浏览器,由Mozilla基金会开发,是一款开源、免费的网络浏览器,以其强大的安全性、隐私保护和高度可定制性著称。本资源是Firefox 68.5.0esr-win64的...