2

我有一个应用程序，它有一个我已经构建的 iframed 所见即所得编辑器。iframe 内容来自同一个域，因此它不是 XSS 问题，但必须对内容进行 iframe 以保持样式表和内容沙盒化。

无论如何，我遇到的问题是我有某些热键要添加到 iframe 中。例如，点击“删除”会删除一个对象。点击 control+z 撤消最新的操作。很基本的东西。我已经完成了所有操作设置，然后在 iframe 加载的前 x 时间内工作得很好。有时我可以立即单击并使用键盘快捷键。其他时候，我必须在快捷方式出现之前单击 5-10 秒或编辑某些内容。一旦他们开始工作，他们就会工作得很好，但我们需要他们每次都全力以赴。这个运行的脚本被加载到 iframed 内容中。该脚本通过了验证并以它应该的所有其他方式工作。

我基本上发现这是一个问题，DOM 混淆了它应该从哪个文档中获取它的键绑定队列，但是还没有提出任何一致的解决方案。

这是我到目前为止所尝试的：

  • 将选择器从 $(document) 更改为 $(parent.document) ：这产生了相反的效果 - 开始运行良好然后停止工作。

  • 将 document 和 parent.document 作为选择器：相同的不稳定行为

  • 绑定到 $(window) 而不是 $(document) ：同样不稳定的行为

  • 将键绑定移动到延迟后调用的函数：这​​里不走运

  • 调用一个函数来触发点击或关注 iframe 主体以查看是否会启动 jquery：这里也没有运气。

  • 使用绑定功能（当前设置为 .keydown()） - 切换到 .on('keydown', .keypress 等，但没有运气

这似乎在所有浏览器中都发生了，但我在 Chrome 和 FF 最新版本中肯定看到过。

如果您需要，我可以发布我的代码的一些基本示例，但代码工作正常，我认为我要么绑定到错误的东西，要么有其他东西可能会捕捉到我遗漏的东西。有什么想法吗？谢谢。

4

1 回答 1

1

想出了一个解决办法。每个浏览器都需要一些不同的东西才能使其正常工作。问题完全在于 iframe 文档不是 DOM 中的顶级文档，但是一旦您专注于 iframe，问题就消失了。这是我为每个浏览器所做的：

  • 铬合金：

    $(parent.document).find("#iframe").focus();

  • Firefox：将焦点添加到 documentElement 并将触发器选择器从 $(document) 更改为

      $(document.documentElement).keydown().focus()

  • IE：

    $('body').focus();

希望对其他人有所帮助。

于 2012-07-06T17:41:24.660 回答