本文详解如何在模板字符串中安全绑定并执行外部函数（如 page()），解决因作用域、执行时机或 html 字符串解析导致的 referenceerror: page is not defined 错误。
在使用模板字符串动态生成 HTML 并内联事件处理（如 onclick="page('xxx')"）时，一个常见误区是认为只要函数已声明就能被 HTML 属性中的字符串代码访问——但实际能否执行，取决于函数是否处于全局作用域，以及事件绑定时的执行上下文是否可访问该函数。
✅ 正确做法：确保 page() 是全局可访问函数
浏览器在解析 onclick="page('123')" 这类内联事件时，会将字符串作为全局作用域下的 JavaScript 代码执行。因此，page 必须是一个挂载在 window 上的函数（即全局函数），否则就会抛出 Uncaught ReferenceError: page is not defined。
以下是最小可行示例：
// ✅ 正确：定义为全局函数（等价于 window.page = function(...) {...}）
function page(folderNum) {
console.log('Navigating to folder:', folderNum);
const productDetails = database.ref(`/products/${folderNum}`);
productDetails.on('value', (snapshot) => {
const details = snapshot.val();
console.log('Product details:', details);
});
}
// 渲染函数保持不变（注意：确保 numberFolder 已正确定义）
function render(img, name, price, numberFolder) {
const row = `
<a class="ProductCard" href="#" onclick="page('${numberFolder}')">
@@##@@
<h1>${name}</h1>
<p>$${price}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/learn/2593" title="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版"><img
src="https://img.php.cn/upload/webcode/000/000/000/5a2b9a88e20e5831.png" alt="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/learn/2593" title="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版">动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版</a>
<p>动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包</p>
</div>
<a href="/xiazai/learn/2593" title="动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</a>
`;
document.querySelector('#main').insertAdjacentHTML('beforeend', row);
}⚠️ 注意：你原代码中 ${numberFolder} 未在参数列表中声明，需补全 render(img, name, price, numberFolder) 并传入有效值，否则仍会报错（如 undefined 被拼入字符串）。
❌ 常见错误与规避方案
| 错误原因 | 说明 | 修复建议 |
|---|---|---|
| page 在模块/闭包内定义 | 如用 const page = (...) => {...} 或在 IIFE 内声明，则无法被 onclick 访问 | 改为 function page() {...} 且不包裹在 const/let 或私有作用域中；或显式挂载：window.page = page; |
| 使用 ES 模块（.mjs）且未导出到全局 | 模块作用域默认隔离，onclick 无法穿透 | 避免内联事件，改用事件委托（推荐 ✅） |
| page 定义在 render() 调用之后 | 执行顺序问题导致 DOM 点击时函数尚未声明 | 确保 <script> 中 page() 声明位于 render() 调用之前，或使用 DOMContentLoaded 包裹初始化逻辑</script> |
✅ 更现代、更安全的替代方案：事件委托 + data-* 属性
为避免内联 JS、提升可维护性与安全性（防止 XSS），推荐使用 事件委托：
// 1. 渲染时不绑定 onclick，仅添加 data 属性
function render(img, name, price, numberFolder) {
const row = `
<a class="ProductCard js-product-link" href="#" data-folder="${numberFolder}">
@@##@@
<h1>${name}</h1>
<p>$${price}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p>
</a>
`;
document.querySelector('#main').insertAdjacentHTML('beforeend', row);
}
// 2. 统一监听（支持后续动态添加的元素）
document.addEventListener('click', function(e) {
if (e.target.matches('.js-product-link')) {
e.preventDefault();
const folderNum = e.target.dataset.folder;
page(folderNum); // ✅ 直接调用，作用域清晰
}
});此方式完全规避了字符串拼接函数名的风险，逻辑解耦、调试友好，且天然兼容模块化开发。
总结
- ✅ 内联 onclick 可行，但要求 page 是全局函数（非 const/let 声明，不在模块私有作用域）；
- ✅ 务必检查 numberFolder 是否有效传递，避免拼出 page('undefined')；
- ✅ 强烈推荐改用事件委托 + data-* 属性，兼顾安全性、可读性与可维护性；
- ❌ 避免在模板字符串中拼接复杂逻辑或未转义用户数据（存在 XSS 风险）。
只要函数可见、参数可靠、绑定方式合理，字符串中的函数调用就能稳定运行。
