java之学习记录 8 - 1 - 解决扫码登录二维码在谷歌浏览器的bug

微信扫码登录跳转

谷歌浏览器调试的时候，iframe标签跨域问题导致无法跳转的bug

如果iframe未添加sandbox属性，或者sandbox属性不赋值，就代表采用默认的安全策略

即：iframe的页面将会被当做一个独立的源，并且不能提交表单，不能执行javascript脚本，也不

能让包含iframe的父页面导航到其他地方，所有的插件，如flash等也全部不能起作用

简单来说iframe就只剩下一个展示数据的功能，正如他的名字一样，所有的内容都被放进了一个 “单独的沙盒”

• sandbox包含的属性及作用：

属性值	说明
allow-scripts	允许运行执行脚本
allow-top-navigation	允许 iframe 能够主导 window.top 进行页面跳转
allow-same-origin	允许同域请求 , 比如 ajax,storage
allow-forms	允许进行提交表单
allow-popups	允许 iframe 中弹出新窗口 , 比如 ,window.open,target=”_blank”
allow-pointer-lock	在iframe中可以锁定鼠标，主要和鼠标锁定有关

• 加上 sandbox=“allow-scripts allow-top-navigation allow-same-origin” 属性，即可解决
• 官方js：http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
• 无法修改微信服务器上的js文件，所以我们将js代码放在本地并进行修改：

created() {
    !(function(a, b, c) {
      function d(a) {
        var c = "default";
        a.self_redirect === !0
          ? (c = "true")
          : a.self_redirect === !1 && (c = "false");
        var d = b.createElement("iframe"),
          e =
            "https://open.weixin.qq.com/connect/qrconnect?appid=" +
            a.appid +
            "&scope=" +
            a.scope +
            "&redirect_uri=" +
            a.redirect_uri +
            "&state=" +
            a.state +
            "&login_type=jssdk&self_redirect=" +
            c +
            "&styletype=" +
            (a.styletype || "") +
            "&sizetype=" +
            (a.sizetype || "") +
            "&bgcolor=" +
            (a.bgcolor || "") +
            "&rst=" +
            (a.rst || "");
        (e += a.style ? "&style=" + a.style : ""),
          (e += a.href ? "&href=" + a.href : ""),
          (d.src = e),
          (d.frameBorder = "0"),
          (d.allowTransparency = "true"),
          (d.sandbox = "allow-scripts allow-top-navigation allow-same-origin"), // 允许多种请求
          (d.scrolling = "no"),
          (d.width = "300px"),
          (d.height = "400px");
        var f = b.getElementById(a.id);
        (f.innerHTML = ""), f.appendChild(d);
      }
      a.WxLogin = d;
    })(window, document);
  },

html部分

<div id="wxLoginForm"></div>

 methods: {
     // 点击微信登录调用方法
     goToLoginWX() {
      // 普通的登录表单隐藏
      document.getElementById("loginForm").style.display = "none";
      // 显示二维码
      document.getElementById("wxLoginForm").style.display = "block";
      
      // 生成二维码
      this.$nextTick(function() {
        this.createCode(); // 直接调用会报错：TypeError: Cannot read property 'appendChild' of null
      });
    },

    createCode() {
      // 生成登录二维码
      var obj = new WxLogin({
        id:"wxLoginForm",// 挂载点 二维码的容器
        appid: "", // 应用唯一标识，在微信开放平台提交应用审核通过后获得
        scope: "snsapi_login", // 应用授权作用域，网页应用目前仅填写snsapi_login即可
        redirect_uri: "", // 重定向地址 （回调地址） 
  href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30gLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30gLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9IC5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX1jcyAuaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ==" // 加载修饰二维码的css样式
      });
    },

     
  }