如何跨浏览器支持多个文本选择？

我正在构建一个基于Web的注释工具,最终用户可以从HTML文档中选择和注释一段文本.从编程上讲,使用"window.getSelection"和"getRangeAt"可以直接访问和使用所选文本和相应的范围.

但是,当我尝试将所有这些放在一个跨浏览器的应用程序中时,我遇到了一个问题.一切都可以在Firefox中找到,但是在Safari中我立即注意到当我点击HTML按钮(即"注释"按钮)时,当前用户文本选择消失,好像点击按钮重新定位了文本插入符号.我尝试访问window.getSelection的代码从此按钮中的脚本执行,然后报告不存在选择.

我深入研究了Google Docs,特别是他们的文字处理应用程序如何处理这个问题,因为选择文本和点击"Bold"或"Change Font"的行为和机制基本上与我的注释功能相对应.在Google文档中,他们会将要编辑的文档文本加载到iframe中.玩弄这个,我了解到Firefox开箱即用支持包含多个框架或iframe的网页中的多个选择范围.换句话说,我可以在基页中选择一段文本,而iframe中的单独文本部分没有第一个选择消失.此Google Docs解决方案适用于Firefox和Safari(我感兴趣的两种浏览器).但是当我构建一个简单的示例页面来测试这个解决方案时,它在Safari中不起作用.只要我单击按钮或在根页面(iframe外部)中选择文本,当前iframe选择的文本就会消失.

任何人都知道我在这里缺少什么让这个工作？或者建议另一种方法让它发挥作用？