javascript - 如何绕过框架或任何嵌入式框架上的 "Blocked call to navigator.vibrate because user hasn' t”？

Question

我有一个用例，我需要使用 navigator.vibrate API 在图像完成从侧面滑入后振动:

代码笔演示在这里:https://codepen.io/ifusion/pen/XeWqpj

请注意，这似乎只适用于 Android Google Chrome 和 Android Firefox

但是，如果 navigator.vibrate 没有被实际触摸激活，那么在 chrome 中会在控制台中抛出错误:

[干预] 阻止调用 navigator.vibrate，因为用户尚未点击框架或任何嵌入式框架:https://www.chromestatus.com/feature/5644273861001216。

三星在本网站的第二步结束时使用它:https://explorethenextgalaxy.com/ (仅适用于 android chrome 和 android firefox)。

发生时的屏幕截图:https://www.dropbox.com/s/e8h7s3nzfwdk9dk/Screenshot%202017-09-13%2016.50.24.png?dl=0

我查看了他们的代码，他们只是像我一样使用 navigator.vibrate，看不到他们做任何不同的事情。

有办法绕过这个吗？我尝试了 .click() 等，但错误仍然存​​在。

Answer 1

振动 API 仅在用户开始与您的页面互动后可用(例如，通过在屏幕上点击或拖动)。它不能在用户交互之前使用 - 这是为了防止网页(尤其是嵌入式广告!)试图通过让手机振动来吓唬用户。

没有办法绕过这一点，除非重组您的页面，使用户必须先点击某些内容才能看到该内容。