WordPress插件开发：如何通过wp_enqueue_scripts共享JS变量？

你的wp_enqueue_script()写法无法让子脚本（child-script）访问到父脚本的foo变量，核心原因有两个：

1. 变量作用域限制 #

父脚本里的foo是声明在jQuery(function($){ ... })的回调函数内部的，属于局部变量，外部代码（包括你的子脚本）没有权限访问这个变量。

2. 脚本路径可能无效 #

你使用的根相对路径/parent-script.js大概率无法正确定位到另一个插件里的脚本文件。WordPress中加载插件资源需要使用官方提供的路径函数（比如plugins_url()、plugin_dir_url()）来生成正确的URL，否则会出现脚本404未加载的情况。

解决步骤 #

第一步：修正脚本加载路径与依赖配置 #

确保父脚本能被正确加载，同时保证依赖顺序生效。示例代码如下：

// 获取父插件脚本的正确URL（假设父插件主文件为parent-plugin/parent-plugin.php，脚本在根目录）
$parent_script_url = plugin_dir_url('parent-plugin/parent-plugin.php') . 'parent-script.js';
// 注册并加载父脚本，最后一个参数设为true，让脚本在页脚加载（和子脚本保持一致）
wp_enqueue_script('parent-script', $parent_script_url, array('jquery'), false, true);

// 获取自身插件子脚本的正确URL
$child_script_url = plugins_url('child-script.js', __FILE__);
// 子脚本依赖父脚本，确保加载顺序
wp_enqueue_script('child-script', $child_script_url, array('jquery', 'parent-script'), false, true);

第二步：调整父脚本的变量作用域（让foo可被外部访问） #

根据你是否能修改父脚本，有两种方案：

方案A：修改父脚本（若有权限）

将foo挂载到全局window对象上，这样外部代码就能访问到：

jQuery(function($){
    window.foo = "This is from parent script"; // 挂载到全局对象
});

子脚本中需要在DOM ready回调内访问foo（因为父脚本的foo是在ready回调中赋值的）：

jQuery(function($){
    console.log(window.foo); // 正常输出变量值
});

方案B：无法修改父脚本时的替代方案

如果父脚本是第三方插件无法修改，你可以监听window.load事件（确保父脚本的ready回调已执行），再访问变量：

jQuery(window).on('load', function(){
    // 此时父脚本的ready回调已执行，若父脚本内部有全局暴露的变量，即可访问
    console.log(window.foo);
});

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