在 iframe 主体上设置焦点和模糊事件不适用于 Firefox

Posted 2023-05-09

【中文标题】在 iframe 主体上设置焦点和模糊事件不适用于 Firefox

【英文标题】：Setting focus and blur events on Iframe body not working with firefox

【发布时间】：2017-02-28 14:43:44

【问题描述】：

我创建了一个可编辑的 iFrame：

<iframe frameborder="0" id="editor"></iframe>

<script type="text/javascript">
    document.getElementById('editor').contentWindow.document.designMode="on";                                       
    document.getElementById('editor').contentWindow.document.close();

    $("#editor").contents().find("body").blur(function() // Blur functions );

    $("#editor").contents().find("body").focus(function()// focus functions );

</script>

焦点和模糊事件在 chrome 中被触发，但不适用于 firefox。

【参考方案1】：

解析为：

<iframe frameborder="0" id="editor"></iframe>

<script type="text/JavaScript">
    document.getElementById('editor').contentWindow.document.designMode="on";                                       
    document.getElementById('editor').contentWindow.document.close();

if(navigator.userAgent.indexOf("Firefox") != -1)
    $("#editor").contents().bind('blur', function() // Blur functions );
    $("#editor").contents().bind('focus', function() // focus functions );
else
    $("#editor").contents().find("body").blur(function() // Blur functions );
    $("#editor").contents().find("body").focus(function() // focus functions );

</script>

对于 Firefox，它适用于在 contents() 上设置的焦点/模糊，而不是用于正文。

【讨论】：

不幸的是，Firefox 的代码对我不起作用，只有当我在这样的模糊/聚焦功能之前发出警报时：if(navigator.userAgent.indexOf("Firefox") != -1) alert("Firefox"); $("#editor").contents().bind('blur', function() // Blur functions ); $("#editor").contents().bind('focus', function() // focus functions );