如何执行字符串内的page()函数？解决Uncaught ReferenceError报错

报错Uncaught ReferenceError: page is not defined的核心原因是：内联onclick属性中的代码会在全局作用域执行，如果你的page函数不是全局变量，就会找不到它。下面是两种可行的解决方法：

方法1：将page函数挂载到全局作用域 #

如果你的代码处于模块化环境（比如ES6模块、CommonJS），page函数默认是模块局部变量，需要把它暴露到window对象上：

// 修改page函数的定义
window.page = function(folderNum){
    rowOrder = `HTML-HERE`
    const productDetails = database.ref(`/products/${folderNum}`);
    productDetails.on('value', (snapshot) => {
        const details = snapshot.val();
        console.log(details)
    })
}

修改后，内联onclick="page('${numberFolder}')"就能在全局作用域找到该函数。

方法2：避免内联事件，使用事件监听（推荐） #

内联事件不仅有作用域问题，还存在XSS安全风险，更优雅的方式是动态创建元素并绑定事件：

function render(img, name, price) {
    // 创建a标签元素
    const a = document.createElement('a');
    a.className = 'ProductCard';
    a.href = '#';
    
    // 创建内部元素
    const imgEl = document.createElement('img');
    imgEl.src = img;
    
    const h1 = document.createElement('h1');
    h1.textContent = name;
    
    const p = document.createElement('p');
    p.textContent = price;
    
    // 组装元素
    a.append(imgEl, h1, p);
    
    // 绑定点击事件，直接引用page函数，不受作用域限制
    a.addEventListener('click', () => {
        page(numberFolder);
    });
    
    // 添加到页面
    document.querySelector('#main').append(a);
}

这种方式无需依赖全局作用域，只要page在render函数的作用域内可访问就能正常执行，同时代码更易维护、安全性更高。

额外注意点 #

• 确保numberFolder变量在render函数内可访问，否则点击事件中也会找不到该变量。
• 方法1会带来全局变量污染，仅在必要场景下使用。

内容的提问来源于stack exchange，提问作者moncef