如何监听Elementor更新按钮点击并关闭内嵌的Elementor帖子iframe？

Elementor编辑器提供了官方JS事件钩子，无需直接绑定按钮DOM元素，推荐用以下方式实现需求：

方案一：监听保存成功事件（推荐） #

Elementor在保存（更新）操作成功完成后会触发document/save/success事件，通过这个钩子可以可靠地触发iframe关闭逻辑：

// 在iframe内的Elementor编辑页面中插入代码
jQuery(document).ready(function($) {
    // 绑定Elementor保存成功事件
    elementor.on('document/save/success', function() {
        // 向父窗口发送关闭指令
        window.parent.postMessage({ action: 'close_elementor_iframe' }, '*');
    });
});

父窗口需要监听该消息来执行关闭操作：

// 父窗口页面中的代码
window.addEventListener('message', function(event) {
    // 验证消息来源（建议替换为实际域名，提升安全性）
    if (event.data.action === 'close_elementor_iframe') {
        // 定位并关闭目标iframe
        const targetIframe = document.getElementById('your_iframe_id');
        if (targetIframe) {
            targetIframe.remove();
            // 若需隐藏而非移除，可改用 targetIframe.style.display = 'none';
        }
    }
});

方案二：监听更新按钮点击（不推荐，依赖DOM选择器） #

如果需要在点击按钮瞬间触发而非等待保存成功，可直接绑定按钮点击事件，但需注意Elementor版本更新可能导致选择器变化：

// 在iframe内的Elementor编辑页面中插入代码
jQuery(document).ready(function($) {
    // 监听更新/保存草稿按钮点击
    $(document).on('click', '#elementor-update-button, #elementor-save-draft', function() {
        window.parent.postMessage({ action: 'close_elementor_iframe' }, '*');
    });
});

注意事项 #

• 不要使用*作为postMessage的目标域，替换为父窗口的实际域名（如'https://your-domain.com'），避免安全风险。
• 优先使用官方事件钩子（方案一），直接操作DOM元素的方式可能因Elementor版本迭代失效。

内容的提问来源于stack exchange，提问作者osama B.