WordPress下载链接JS问题求助：倒计时后自动下载+重复点击直接下载

以下是修复后的完整代码，解决倒计时后自动下载、重复点击直接触发下载的问题：

1. functions.php 短代码代码 #

function generate_download_link_shortcode($atts) {
    // 替换为你的真实原始下载链接
    $original_url = 'https://example.com/your-file.zip'; 
    // 生成随机token（可保留你原有token生成逻辑）
    $token = wp_generate_password(16, false);
    $speed_limit = 500; // 限速500kbps

    $tokenized_url = add_query_arg([
        'token' => $token,
        'speed' => $speed_limit
    ], $original_url);

    // 返回带自定义属性的链接，供JS读取原始地址和带参地址
    return sprintf(
        '<a href="%s" class="download-link" data-original-url="%s" data-token-url="%s">点击下载</a>',
        esc_url($tokenized_url),
        esc_url($original_url),
        esc_url($tokenized_url)
    );
}
add_shortcode('dow', 'generate_download_link_shortcode');

2. JavaScript 逻辑代码 #

可将此代码添加到主题的自定义JS文件中，或通过wp_enqueue_script加载：

document.addEventListener('DOMContentLoaded', function() {
    const downloadLinks = document.querySelectorAll('.download-link');

    downloadLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 检查是否已完成过倒计时，直接触发下载
            if (this.classList.contains('has-downloaded')) {
                triggerDownload(this.dataset.originalUrl);
                return;
            }

            const self = this;
            let countdown = 3;
            const originalText = this.textContent;

            // 启动倒计时
            const countdownTimer = setInterval(() => {
                self.textContent = `请等待 ${countdown} 秒...`;
                countdown--;

                if (countdown < 0) {
                    clearInterval(countdownTimer);
                    // 恢复原文本并标记已完成倒计时
                    self.textContent = originalText;
                    self.classList.add('has-downloaded');
                    // 更新链接为原始地址
                    self.href = self.dataset.originalUrl;
                    // 自动触发下载
                    triggerDownload(self.dataset.originalUrl);
                }
            }, 1000);
        });
    });

    // 通用下载触发函数，避免浏览器拦截
    function triggerDownload(url) {
        const downloadBtn = document.createElement('a');
        downloadBtn.href = url;
        downloadBtn.download = '';
        downloadBtn.style.display = 'none';
        document.body.appendChild(downloadBtn);
        downloadBtn.click();
        document.body.removeChild(downloadBtn);
    }
});

修复说明 #

• 自动触发下载：新增triggerDownload函数，通过创建隐藏<a>标签模拟点击的方式触发下载，相比window.open更不易被浏览器拦截，倒计时结束后自动调用该函数。
• 重复点击直接下载：给完成倒计时的链接添加has-downloaded类作为标记，后续点击时直接跳过倒计时逻辑，触发下载；同时更新链接的href属性为原始地址，确保右键复制也能获取正确链接。

内容的提问来源于stack exchange，提问作者Wp-PHP