本文详解如何解决 Tampermonkey 脚本中因作用域与执行时机导致的变量不可见问题，通过合理声明变量作用域、改用 setInterval 等待目标元素就绪，并正确绑定事件回调，实现在按钮点击时可靠使用延迟获取的 DOM 值。
本文详解如何解决 tampermonkey 脚本中因作用域与执行时机导致的变量不可见问题，通过合理声明变量作用域、改用 `setinterval` 等待目标元素就绪，并正确绑定事件回调，实现在按钮点击时可靠使用延迟获取的 dom 值。
在 Tampermonkey（或任意用户脚本环境）中编写 JavaScript 时，一个常见陷阱是：在异步操作（如 setTimeout/setInterval）中获取的 DOM 值，无法被后续同步触发的函数（如按钮点击事件）直接访问。根本原因在于变量作用域、声明方式（const/let/var）以及事件监听器的错误调用方式。
? 核心问题诊断
原始代码存在三个关键错误：
- 作用域隔离：const idElement = ... 在 setTimeout 回调内重新声明，仅限该回调作用域，外部 sendEmail() 无法访问；
- 立即执行而非事件绑定：emailButton.addEventListener('click', sendEmail(idElement)) 中 sendEmail(idElement) 是立即调用（此时 idElement 还是 "rien"），而非传入函数引用；
- 静态等待策略失效：单次 setTimeout 无法应对页面反复加载、目标元素延迟渲染的场景（如 SPA 或复杂前端框架）。
✅ 正确解决方案
1. 提升变量作用域并使用可变声明
将 idElement 声明为 模块级 let 变量，确保整个 IIFE 内所有函数均可读写：
let idElement = "rien"; // ← 在 IIFE 顶层声明，非 const！
⚠️ 注意：const 适用于真正不变的常量；此处值需后期更新，必须用 let（或 var，但 let 更安全）。
2. 改用 setInterval 主动轮询 + 自动清理
替代一次性 setTimeout，每秒检查目标元素是否存在，获取值后立即清除定时器，兼顾健壮性与性能：
let tId = setInterval(() => {
const element = document.getElementById('application-AccessManagement-Display-component---accessManagementPhase--accessmanagement_01_01_01-defaultXML--internationalCode-inner');
if (element) {
idElement = element.value; // ← 更新全局变量
console.log('✅ ID récupéré :', idElement);
emailButton.style.backgroundColor = '#38a832';
clearInterval(tId); // ← 关键：停止轮询
}
}, 1000);
3. 修正事件监听器绑定方式
确保 sendEmail 作为函数引用传入，而非执行结果：
// ✅ 正确：传入函数本身，点击时执行
emailButton.addEventListener('click', sendEmail);
// ✅ 或显式箭头函数（需保持 this 上下文一致时推荐）
// emailButton.addEventListener('click', () => sendEmail());
// ❌ 错误：立即执行并传入返回值（undefined）
// emailButton.addEventListener('click', sendEmail(idElement));
同时，sendEmail 函数无需参数，直接读取全局 idElement：
function sendEmail() {
const recipient = 'kevin@example.com'; // 注意：原代码中含 Cloudflare 邮箱混淆，实际使用需解密或替换
const subject = 'Sujet de l\'e-mail';
const variable2 = 'Valeur de la variable 2';
const variable3 = 'Valeur de la variable 3';
const body = `Contenu de l'e-mail :\n\n` +
`Variable 1 : ${idElement}\n` +
`Variable 2 : ${variable2}\n` +
`Variable 3 : ${variable3}\n`;
const mailtoLink = `mailto:${recipient}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
window.location.href = mailtoLink;
}
4. 封装于 DOMContentLoaded 确保 DOM 就绪
将全部逻辑包裹在 window.addEventListener('DOMContentLoaded', ...) 中，避免脚本执行早于 DOM 构建：
(function() {
'use strict';
window.addEventListener('DOMContentLoaded', function() {
// ? 所有代码放在此处（创建按钮、声明 idElement、setInterval、sendEmail、事件绑定等）
});
})();
? 完整修复后代码（精简版）
(function() {
'use strict';
window.addEventListener('DOMContentLoaded', function() {
// 创建按钮
const emailButton = document.createElement('button');
emailButton.textContent = 'Envoyer un e-mail';
Object.assign(emailButton.style, {
position: 'fixed',
bottom: '20px',
right: '20px',
zIndex: '9999',
padding: '10px',
backgroundColor: '#a83232',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer'
});
let idElement = "rien"; // ← 全局可修改变量
// 轮询获取目标元素值
const pollTimer = setInterval(() => {
const el = document.getElementById('application-AccessManagement-Display-component---accessManagementPhase--accessmanagement_01_01_01-defaultXML--internationalCode-inner');
if (el && el.value) {
idElement = el.value;
console.log('ID récupéré :', idElement);
emailButton.style.backgroundColor = '#38a832';
clearInterval(pollTimer);
}
}, 1000);
// 添加按钮到页面
document.body.appendChild(emailButton);
// 发送邮件函数（直接访问全局 idElement）
function sendEmail() {
const recipient = 'kevin@example.com';
const subject = 'Sujet de l\'e-mail';
const body = `Contenu de l'e-mail :\n\n` +
`Variable 1 : ${idElement}\n` +
`Variable 2 : Valeur de la variable 2\n` +
`Variable 3 : Valeur de la variable 3\n`;
const mailtoLink = `mailto:${recipient}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
window.location.href = mailtoLink;
}
// 绑定点击事件（传函数引用！）
emailButton.addEventListener('click', sendEmail);
});
})();
? 总结与最佳实践
- 变量声明原则：需跨函数共享的状态，必须声明在共同作用域（如 IIFE 顶层），且用 let 保证可重赋值；
- 异步数据获取：对不稳定 DOM，优先用 setInterval + clearInterval 轮询，比单次 setTimeout 更鲁棒；
- 事件绑定铁律：addEventListener(type, handler) 的 handler 参数必须是函数对象，切勿加括号 ()；
-
安全增强建议：
- 在 sendEmail() 中增加 if (!idElement || idElement === "rien") { alert("Données non disponibles"); return; } 防御性检查；
- 使用 MutationObserver 替代轮询（更高效），适用于高级场景；
- 对 Cloudflare 邮箱混淆，可在运行时解密或硬编码真实邮箱（注意隐私合规）。
遵循以上模式，即可彻底解决 Tampermonkey 中“变量在函数外不可用”的典型困境，构建稳定可靠的用户脚本。
