Liferay环境下JavaScript不生效（用户操作无触发）问题咨询

问题根因 #

• 函数命名冲突与递归错误：自定义alert函数和浏览器原生全局window.alert方法重名，函数内部调用alert()会触发无限递归，最终导致JS执行栈溢出，代码报错终止。
• Liferay脚本隔离机制：Liferay默认会将自定义JS代码包裹在匿名闭包内，避免全局作用域污染，直接定义的函数仅在闭包内部生效，无法被行内onclick事件访问（行内事件仅能调用全局作用域下的方法）。

修复方案 #

优先推荐使用事件监听绑定交互，避免使用行内事件和全局变量污染：

HTML代码 #

<button type="button" id="greetBtn">Want a greeting?</button>

JavaScript代码 #

// 替换自定义函数名，不要和原生方法重名
function showGreeting() {
  alert('working...')
}

// 通过ID选择器绑定点击事件，适配Liferay的闭包隔离机制
document.getElementById('greetBtn').addEventListener('click', showGreeting)

如果确实需要使用行内onclick事件，需要手动将自定义函数挂载到window全局对象：

function showGreeting() {
  alert('working...')
}
// 手动暴露到全局作用域
window.showGreeting = showGreeting

对应HTML调整为：

<button type="button" onclick="showGreeting()">Want a greeting?</button>

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