本文讲解如何在模板字符串生成的 html 中正确调用外部定义的 javascript 函数（如 `page()`），避免因作用域或执行时机问题导致的 `referenceerror: page is not defined` 错误。核心在于确保函数全局可访问、作用域正确，且不依赖未初始化环境。
在使用模板字符串动态插入 HTML 并绑定内联事件（如 onclick="page('xxx')"）时，JavaScript 会将该字符串解析为 DOM 后，在点击时刻尝试从全局作用域查找 page 函数。若 page 未声明为全局函数（例如被包裹在模块、IIFE 或其他作用域中），或其定义语句位于 render() 调用之后（JS 执行顺序问题），就会触发 Uncaught ReferenceError: page is not defined。
✅ 正确做法是：确保 page() 是可被全局访问的命名函数，且定义早于任何 HTML 插入操作。
以下是一个完整、可运行的示例：
<div id="main"><h3>点击下方卡片测试</h3></div>
<script>
// ✅ 正确定义：函数声明提升，全局可访问
function page(folderNum) {
console.log('跳转到文件夹:', folderNum);
// 示例：模拟异步数据获取（注意：此处需确保 database 已正确定义）
// const productDetails = database.ref(`/products/${folderNum}`);
// productDetails.on('value', (snapshot) => {
// console.log(snapshot.val());
// });
}
function render(img, name, price, numberFolder) {
// ⚠️ 注意：原代码中未传入 numberFolder，需补充参数
const row = `
<a class="ProductCard" href="#" onclick="page('${numberFolder}')">
<img src="${img}" alt="${name}" style="max-width:90%">
<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>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10169" title="JS X Monitor"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="JS X Monitor" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10169" title="JS X Monitor">JS X Monitor</a>
<p>X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。</p>
</div>
<a href="/xiazai/skill10169" title="JS X Monitor" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</a>
`;
document.querySelector('#main').insertAdjacentHTML('beforeend', row);
}
// ✅ 调用前确保 page 已定义
render('https://via.placeholder.com/100', '无线耳机', '299', 'electronics-01');
render('https://via.placeholder.com/100', '机械键盘', '899', 'electronics-02');
</script>? 关键注意事项：
- 作用域陷阱：不要将 page 定义在 render 内部、模块顶层（ESM 默认无全局污染）、或 IIFE 中——除非你显式挂载到 window.page = ...；
- 执行时机：内联 onclick 是字符串求值，仅支持全局函数调用，不支持箭头函数、局部变量或未提升的函数表达式；
- 安全性提醒：内联事件 + 字符串拼接存在 XSS 风险（尤其当 numberFolder 来自用户输入）。生产环境推荐使用事件委托 + addEventListener：
// 更安全的替代方案（推荐）
function renderSafe(img, name, price, folderNum) {
const a = document.createElement('a');
a.className = 'ProductCard';
a.href = '#';
a.innerHTML = `
<img src="${img}" alt="${name}">
<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>”；</p>
`;
a.dataset.folder = folderNum; // 使用 data 属性传递参数
a.addEventListener('click', (e) => {
e.preventDefault();
page(a.dataset.folder); // 安全、可控、无 XSS 风险
});
document.querySelector('#main').appendChild(a);
}? 总结：字符串中的 onclick 不是“无法执行函数”，而是要求函数必须在全局作用域中可用。优先采用 addEventListener 方案，兼顾可维护性、安全性和调试友好性。
