本文介绍在 wordpress（特别是 woocommerce）中，根据 php 条件（如 `is_product()`）安全、正确地动态加载外部 javascript 文件的方法，避免直接 `include` 脚本或输出未闭合的 html 导致的错误。

在 WordPress 主题或插件开发中，常需按页面类型（如 WooCommerce 商品页）条件化加载特定脚本。但常见误区包括：使用 include('script.js') 尝试“包含” JS 文件（实际会尝试解析为 PHP，导致错误或空白输出），或在 PHP 中拼接 <script> 标签时遗漏闭合标签、引号不匹配，引发语法错误或前端执行异常。

✅ 正确做法是：在 HTML 输出阶段，通过 PHP 条件判断，仅插入标准的 <script src="..."> 标签。该标签由浏览器负责异步/延迟加载并执行，完全符合 Web 规范。

以下为推荐实现方式（以 WooCommerce 商品页为例）：

1. <?php if (is_product()) : ?> 
2.   <script type="text/javascript" src="<?php echo esc_url(get_template_directory_uri() . '/js/script.js'); ?>"></script> 
3. <?php endif; ?> 

⚠️ 关键注意事项：

路径务必使用 get_template_directory_uri() 或 plugins_url() 等 WordPress 安全函数，避免硬编码路径；

始终用 esc_url() 过滤 URL，防止 XSS 风险；

不要在 template_redirect 或 init 等早期钩子中 echo <script> 标签——此时 HTML 文档尚未开始输出，会导致内容出现在 HTTP 响应头之前，破坏页面结构；

若需确保脚本在 DOM 加载后执行，应在 script.js 内部自行处理（如 document.addEventListener('DOMContentLoaded', ...)），而非在内联 <script> 中包裹 window.addEventListener("load", ...) —— 外链脚本本身已具备执行时机控制能力。

进阶建议：对于生产环境，推荐使用 wp_enqueue_script() 配合条件钩子（如 wp_enqueue_scripts），以支持依赖管理、版本控制和脚本优化：

1. function enqueue_product_page_script() { 
2.   if (is_product()) { 
3.     wp_enqueue_script( 
4.       'custom-product-script', 
5.       get_template_directory_uri() . '/js/script.js', 
6.       array(), // 依赖（如 'jquery'） 
7.       '1.0.0', // 版本号，便于缓存刷新 
8.       true     // true = 在 footer 加载 
9.     ); 
10.   } 
11. } 
12. add_action('wp_enqueue_scripts', 'enqueue_product_page_script'); 

这种方式更符合 WordPress 最佳实践，兼容主题与插件的脚本排队机制，并支持 wp_add_inline_script() 动态注入初始化逻辑。总之，条件加载 ≠ 条件执行 PHP，而是条件输出合规的 HTML <script> 标签或调用标准化的队列 API。

Tags: PHP动态加载JavaScript文件

分享到：