Firefox下unload回调中initEditorOn不执行 Chrome运行正常的兼容问题

问题根因 #

你遇到的是Firefox和Chrome对iframe unload事件的执行上下文处理差异导致的问题：

1. Firefox中iframe触发unload事件时，iframe的window上下文已经进入销毁流程，此时在unload回调中执行的代码，除了console.log这类不依赖当前上下文的操作外，其余涉及DOM操作、跨上下文对象调用的逻辑，大概率会被浏览器中断执行。
2. 还有个常见的拦截场景：你initEditorOn方法第一行就判断了document.getElementById(editorId)是否存在，Firefox中iframe卸载时关联的DOM节点会被更早标记为不可用/移除，大概率会触发这个判断直接return，导致方法看起来没执行。

解决方案 #

• 方案1：把init调用抛到外层主窗口的事件循环执行，脱离正在销毁的iframe上下文，修改你的unload回调代码：

jQuery(editor.getWin()).on('unload', function () {
    console.log('#########HERE############ ')
    // 用外层window的setTimeout，延时0即可把执行上下文切到主窗口
    window.setTimeout(() => {
        window.hexbit.widget.initEditorOn(editorId, mediaButtons);
    }, 0)
});

• 方案2：弃用iframe的unload事件，改用TinyMCE官方提供的destroy事件监听，事件触发时机由库统一控制，跨浏览器兼容性更好，不会出现上下文销毁导致的逻辑中断问题。
• 方案3：可以在initEditorOn入口加调试日志，确认是否进入了方法后被某个return逻辑拦截，如果是DOM判断被拦截，可以加个短延时再执行DOM判断逻辑。

内容的提问来源于stack exchange，提问作者smarteist