Elementor预览模式下如何获取自定义小部件的设置参数？

Elementor预览模式下，frontend_available => true的设置不会输出为data-settings属性，因为预览环境依赖Elementor的前端框架统一管理部件数据。以下是两种可靠的获取方式（支持jQuery）：

方法1：利用Elementor前端钩子（推荐） #

通过Elementor提供的初始化钩子和部件就绪事件，确保在正确时机获取设置：

// 等待Elementor前端初始化完成
jQuery(window).on('elementor/frontend/init', function() {
    // 监听你的自定义小部件渲染完成事件
    // 替换 `your-custom-widget` 为你PHP中注册的小部件ID
    elementorFrontend.hooks.addAction('frontend/element_ready/your-custom-widget.default', function($scope) {
        // 方式A：从$scope的存储数据中直接获取
        const widgetSettings = $scope.data('elementor-settings');
        
        // 方式B：通过部件ID从全局对象获取
        const widgetId = $scope.data('id');
        const settings = elementorFrontend.getSettings(widgetId);
        
        // 这里处理你的设置逻辑
        console.log('小部件设置:', settings);
    });
});

方法2：兼容前端和预览模式的通用写法 #

如果需要在现有脚本基础上修改，可同时兼容两种环境：

const $myElement = jQuery(myElement); // 替换为你的小部件DOM元素的jQuery对象
let myElementSettings;

// 优先尝试前端模式的data-settings
myElementSettings = $myElement.attr('data-settings');
if (myElementSettings) {
    myElementSettings = JSON.parse(myElementSettings);
} else if (typeof elementorFrontend !== 'undefined') {
    // 预览模式下通过Elementor全局对象获取
    const widgetId = $myElement.data('id');
    myElementSettings = elementorFrontend.getSettings(widgetId);
}

// 后续使用设置的逻辑
if (myElementSettings) {
    console.log('获取到的设置:', myElementSettings);
}

关键注意事项 #

• 替换your-custom-widget为你自定义小部件的实际ID（即PHP中register_widget_type方法传入的ID）。
• 必须确保代码在Elementor初始化后执行，否则elementorFrontend对象会未定义，监听elementor/frontend/init事件是最稳妥的方式。
• 预览模式下，所有部件的设置都存储在elementorFrontend的全局状态中，通过data-id属性关联。

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