Chrome 如何绕过“由于用户尚未点击框架或任何嵌入式框架而阻止调用navigator.vibrate”？

roqulrg3 于 2023-11-14 发布在 Go

关注(0)|答案(5)|浏览(281)

我有一个用例，我需要使用navigator.vibrate API在图像从侧面滑入后振动：
代码笔演示在这里：https://codepen.io/ifusion/pen/XeWqpj

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

但是，如果navigator.vibrate没有被实际触摸激活，则在Chrome中会在控制台中抛出错误：
[Intervention] Blocked call to navigator.vibrate because user hasn't tapped on the frame or any embedded frame yet: 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()等，但错误仍然显示。

google-chrome

来源：https://stackoverflow.com/questions/46189105/how-to-bypass-blocked-call-to-navigator-vibrate-because-user-hasnt-tapped-on-t

5条答案

按热度按时间

carvr3hs1#

震动API仅在用户开始与您的页面交互（例如，通过点击或拖动屏幕）后才可用。在用户交互之前不能使用它-这是为了防止网页（特别是嵌入式广告！）试图通过使手机震动来吓唬用户。
没有办法绕过这一点，除非重新构建您的页面，使用户在看到该内容之前必须点击某些内容。

赞(0）回复(0）举报 2023-11-14

3wabscal2#

另一条路很容易。
在您的Chrome浏览器上禁用此选项，请转到

chrome://flags

字符串
并找到名为：：Vibration API需要用户手势的选项，然后将值更改为Disable。
这将需要重新加载您的浏览器，现在一切工作找到。

赞(0）回复(0）举报 2023-11-14

mspsb9vt3#

if(window.navigator.userAgentData.mobile){
    window.navigator.vibrate(100);
}

字符串

赞(0）回复(0）举报 2023-11-14

vu8f3i0k4#

只要看看是不是移动的

const isMobile: () => {
    const nav = navigator.userAgent.toLowerCase();
    return (
        nav.match(/iphone/i) || nav.match(/ipod/i) || nav.match(/ipad/i) || nav.match(/android/i)
    );
};

isMobile() && window.navigator.vibrate(100);

字符串

赞(0）回复(0）举报 2023-11-14

jum4pzuy5#

我只是面对这个问题，并找到了简单的解决方案：
第一个月
使用事件处理程序。
没有更多的错误控制台消息。

赞(0）回复(0）举报 2023-11-14