WordPress自定义插件onclick调用GetPDF函数失效问题求助

问题原因 #

你的GetPDF()函数未处于全局作用域，或者JS代码加载时机晚于按钮渲染，导致点击按钮时函数尚未定义。另外直接将JS与PHP混在同一文件，不符合WordPress脚本加载规范，容易引发作用域问题。

解决方案 #

方案1：将函数挂载到全局window对象

修改JS代码，显式把函数绑定到window上，确保全局可访问：

window.GetPDF = function() {
    window.print();
};

这样inline的onclick="GetPDF()"就能正确找到函数。

方案2：使用WordPress标准脚本加载方式（推荐）

这种方式更符合WordPress开发规范，避免作用域和加载顺序问题：

1. 创建独立JS文件：在插件目录下新建print-pdf.js，写入以下代码：

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    const printBtn = document.querySelector('button[value="Print_PDF"]');
    if (printBtn) {
        printBtn.addEventListener('click', function() {
            window.print();
        });
    }
});

2. 在插件主文件中注册并加载脚本：

// 注册打印脚本
function wpb_enqueue_print_script() {
    if (is_single()) {
        wp_enqueue_script(
            'print-pdf-script',
            plugin_dir_url(__FILE__) . 'print-pdf.js',
            array(), // 依赖项，无则留空
            '1.0', // 版本号
            true // 设为true在footer加载，确保DOM已渲染
        );
    }
}
add_action('wp_enqueue_scripts', 'wpb_enqueue_print_script');

// 添加打印按钮到文章内容
function wpb_follow_us($content) {
    if (is_single()) {  
        // 移除inline onclick，改用事件监听
        $content .= '<button type="button" value="Print_PDF"> Print PDF </button>';
    } 
    return $content;  
}
add_filter('the_content', 'wpb_follow_us');

注意：将按钮type从Submit改为button，避免触发默认表单提交行为。

方案3：临时快速修复（不推荐长期使用）

直接在输出按钮的同时，将JS代码嵌入页面，确保函数在按钮之前定义：

function wpb_follow_us($content) {
    if (is_single()) {  
        $content .= '<button type="button" value="Print_PDF" onclick="GetPDF()"> Print PDF </button>';
        $content .= '<script>
            function GetPDF() {
                window.print();
            }
        </script>';
    } 
    return $content;  
}
add_filter('the_content', 'wpb_follow_us');

内容的提问来源于stack exchange，提问作者Delano van londen