如何实现页面加载时触发navigator.vibrate振动功能？

嘿，这个坑我之前踩过！问题出在现代浏览器的安全权限限制上——振动API（Vibration API）属于需要用户主动交互才能触发的敏感功能，浏览器不允许页面刚加载完成就自动调用，防止恶意网站滥用这个功能打扰用户。

为什么点击按钮有效？ #

因为点击按钮是用户主动发起的交互行为，符合浏览器的权限要求；而window.onload或<body onload>触发的代码属于页面自动执行的逻辑，不在允许的范围内。

修复方案 #

根据浏览器的规则，我们需要把振动逻辑和用户的首次交互绑定，这里提供两种可行的方式：

方案1：引导用户首次交互后触发振动

这种方式适合需要页面加载后尽快振动的场景，先提示用户点击页面，然后触发振动：

<html>
<head>
<script type="text/javascript">
function example1() {
  // 先判断设备是否支持振动API
  if ('vibrate' in navigator) {
    navigator.vibrate([500]);
  } else {
    alert('你的设备不支持振动功能');
  }
}

window.addEventListener('load', function() {
  // 提示用户触发交互
  alert('请点击页面任意位置触发振动');
  
  // 监听首次点击事件，只执行一次
  function handleFirstInteraction() {
    example1();
    document.removeEventListener('click', handleFirstInteraction);
  }
  
  document.addEventListener('click', handleFirstInteraction);
});
</script>
</head>
<body>
<div><button onclick="example1()">Vibrate</button></div>
</body>
</html>

方案2：绑定到业务必要的用户操作

如果你的页面有必须的用户操作（比如“进入应用”按钮、同意隐私协议），可以直接把振动逻辑绑定到这个操作上，比如：

<html>
<head>
<script type="text/javascript">
function example1() {
  if ('vibrate' in navigator) {
    navigator.vibrate([500]);
  }
}

// 假设这是进入应用的按钮点击事件
function enterApp() {
  // 执行业务逻辑
  console.log('进入应用');
  // 触发振动
  example1();
}
</script>
</head>
<body>
<div>
  <button onclick="enterApp()">进入应用并振动</button>
  <button onclick="example1()">单独振动</button>
</div>
</body>
</html>

额外提示 #

• 测试时请使用HTTP/HTTPS环境，本地file://协议下浏览器的权限规则可能有所不同，但正式上线必须遵守交互触发的要求。
• 始终先判断navigator.vibrate是否存在，避免在不支持的设备上抛出错误。

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