微信扫描二维码登录的跳转重定向被浏览器阻止
<script type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
在index.html和需求页面都加入以上代码,可以正确引入生成二维码功能。
<script
type="text/javascript"
src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"
></script>
引入微信的扫码js文件后,页面会重定向到redirect_uri设置的地址
!(https://img2024.cnblogs.com/blog/3673451/202508/3673451-20250806094108018-690400268.png)
为了阻止浏览器重定向,需要在生成二维码后,加入以下代码,以改变iframe源码
this.$nextTick(() => {
var obj = new WxLogin({
self_redirect: false,
id: "wx_login_container",
appid: "wxxxxxxxxxxxxxxxx",
scope: "snsapi_login",
redirect_uri: "http://xxxxxxxxxxxxxx",
state: "xxxxxxxxxxxxxxx",
style: "black",
stylelite: 1,
});
//当new WxLogin后,iframe已经被嵌入到我们指定的id容器内了
let wxIframeEle = document.querySelector('#wx_login_container iframe');
// 对嵌入的微信iframe设置以下属性,可以阻止浏览器默认对重定向的拦截
wxIframeEle.setAttribute(
'sandbox',
'allow-top-navigation allow-same-origin allow-scripts',
);
wxIframeEle.src = `${wxIframeEle.src}&self_redirect=true`;
浙公网安备 33010602011771号