阻止微信浏览器/QQ浏览器弹框“在浏览器打开”

阻止微信浏览器/QQ浏览器弹框“在浏览器打开”

相信许多移动端工程师对下面这张图中出现的东西记忆深刻:
这里写图片描述
微信浏览器和QQ浏览器有个自带的特殊功能,就是长按会出现上图所示的弹框。有时候前端页面中有长按事件时,总是会触发这个弹框而影响我们自己开发的功能。那么该如何屏蔽这个弹框呢?
很简单,这个弹框实际上等同于PC环境下的鼠标右键的弹框,因此只要禁止页面的弹框事件就能完美屏蔽该弹框对我们功能带来的影响。程序代码如下:

document.oncontextmenu=function(e){
	//或者return false;
	e.preventDefault();
};

仅仅上面这段简短的代码就可以把这个难受的弹框给屏蔽掉(oncontextmenu事件中执行return false;或者e.preventDefault的效果是完全等同的)。
也许右键弹框在PC端很重要,但是对于移动端而言,这个弹框显然可有可无,因此在需要时,放心的使用上面的代码把它屏蔽掉就行。


注意不要使用下面这种代码形式(或者类似的方法)来阻止这个弹框:

//错误方法
document.addEventListener('touchstart', function(ev){
    ev.preventDefault();
},false);

上面这段代码会阻止页面滚动事件、a标签默认跳转事件等不该屏蔽的事件。

熬夜不易,请作者喝酒!

### 微信授权登录窗实现方式及解决方案 #### 一、微信授权登录窗的实现原理 在 Vue3 或 Nuxt3 的移动端 H5 开发中,可以通过 JavaScript 调用 `window.open` 方法来打开一个新的窗口用于微信授权登录。这种方式可以有效避免页面跳转带来的用户体验问题[^1]。 以下是具体的实现逻辑: - 使用 `window.open(url, '_blank')` 打开新的窗口加载微信授权 URL。 - 授权完成后,新窗口通过回调函数通知父窗口完成操作,并关闭当前窗口。 - 如果需要返回到原页面,则可以在父窗口设置监听器处理回调数据。 #### 二、代码示例 以下是一个基于 Vue3 的微信授权登录窗实现: ```javascript // 定义方法触发微信授权登录 function openWechatAuthPopup() { const authUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?' + 'appid=YOUR_APP_ID' + '&redirect_uri=' + encodeURIComponent('YOUR_REDIRECT_URL') + '&response_type=code' + '&scope=snsapi_userinfo' + '&state=RANDOM_STATE#wechat_redirect'; // 创建一个新窗口 const popupWindow = window.open(authUrl, '_blank', 'width=600,height=800'); // 设置定时检测子窗口是否被关闭 const checkInterval = setInterval(() => { if (popupWindow.closed) { clearInterval(checkInterval); handleLoginCallback(); // 处理登录后的回调逻辑 } }, 500); } // 登录成功后的回调处理 function handleLoginCallback() { console.log('微信授权登录已完成'); fetchUserInfo().then(userInfo => { alert(`欢迎回来 ${userInfo.nickName}`); }); } // 获取用户信息的方法 async function fetchUserInfo(code) { const response = await fetch('/your-api-endpoint?code=' + code); // 替换为实际接口地址 return await response.json(); } ``` 上述代码实现了通过窗方式进行微信授权登录的功能[^2]。 #### 三、解决重复跳转和无法返回的问题 针对微信授权后反复跳转至登录页的情况,通常是因为未正确校验 `code` 参数或者未及时清除缓存中的状态值。具体解决方案如下: 1. **检查是否有 `code` 参数** 在进入授权页面时,先判断 URL 中是否存在 `code` 参数。如果存在则不再发起新的授权请求,而是直接执行后续业务逻辑。 2. **清理本地存储的状态值** 当前页面接收到授权成功的消息后,应立即删除或更新与本次授权相关的临时变量(如 session storage),防止再次访问时误触重新授权流程。 3. **调整 redirect_uri 配置** 确保配置的 `redirect_uri` 地址能够正常接收并解析来自微信服务器传递过来的数据包,同时该路径下需具备相应的能力去终止进一步的重定向行为。 4. **优化历史记录管理** 对于某些特殊场景下的返回按钮异常现象,可通过修改浏览器的历史堆栈来修复此缺陷。例如,在初始化阶段调用 `history.replaceState(null, '', location.pathname)` 来替换掉多余的导航条目[^3]。 #### 四、其他注意事项 - 若采用二维码扫描形式进行身份验证,则建议将生成好的 QRCode 图片嵌入到对话组件内部显示给访客查看;待对方确认之后再销毁实例释放资源。 - 不同版本架间可能存在细微差异,请参照官方文档适配最新语法特性。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

响尾大菜鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值