如何使用beforeunload调用JS函数？求助实现speechCancel调用

首先需要明确：beforeunload 事件是在用户离开页面（比如关闭标签页、刷新页面、跳转至其他页面）时触发的，并非页面加载进入时的事件。如果你的需求是在离开页面时调用speechCancel函数，可按以下方式实现：

方式一：直接绑定事件处理函数 #

// 绑定beforeunload事件
window.addEventListener('beforeunload', function(event) {
  // 调用你的speechCancel函数
  speechCancel();
  
  // 部分浏览器需要设置returnValue才能触发确认提示（不需要提示可省略）
  event.preventDefault();
  event.returnValue = '';
});

方式二：使用命名函数作为事件处理程序 #

如果后续需要移除事件监听，推荐使用命名函数：

function handleBeforeUnload(event) {
  speechCancel();
  event.preventDefault();
  event.returnValue = '';
}

// 添加监听
window.addEventListener('beforeunload', handleBeforeUnload);

// 若需移除监听，可执行：
// window.removeEventListener('beforeunload', handleBeforeUnload);

如果你的实际需求是在用户进入页面时调用speechCancel，则应该使用页面加载相关事件，比如DOMContentLoaded（DOM结构加载完成后触发）或load（所有资源加载完成后触发）：

DOMContentLoaded 示例 #

document.addEventListener('DOMContentLoaded', function() {
  speechCancel();
});

load 示例 #

window.addEventListener('load', function() {
  speechCancel();
});

注意：部分浏览器对beforeunload事件的处理有限制，比如不允许自定义提示文本，只能显示浏览器默认的确认弹窗；如果事件处理函数中未调用preventDefault()或设置returnValue，可能不会触发弹窗，但speechCancel函数仍会正常执行。

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