浙政钉二维码控制显示及缩放

我有个项目登录需要用浙政钉扫码登录，并且只显示二维码部分。

按照官方文档有两种方式往业务页面中引入浙政钉二维码：

一、使用政务钉钉提供的扫码登录页面

在企业Web系统里，用户点击使用钉钉扫码登录，第三方Web系统跳转到如下地址：

https://login.dg-work.cn/oauth2/auth.htm?response_type=code&client_id=应用标识&redirect_uri=回调地址&scope=get_user_info&authType=QRCODE

URL中的client_id和redirect_uri两个参数的值填入第三方web系统的应用标识和回调地址。政务钉钉用户扫码登录并确认后，会302到你指定的redirect_uri，并向url参数中追加临时授权码code（此code非authcode）及state两个参数。

注意事项：参数"redirect_uri=回调地址"涉及的域名，需和创建扫码登录应用授权时填写的回调域名一致，否则会提示无权限访问。生成二维码大小固定为200*200px，不支持修改。

二、支持网站将政务钉钉登录二维码内嵌到自己页面中

步骤1：在页面中通过iframe嵌入页面

通过方式一构造的地址增加embedMode=true的参数

https://login.dg-work.cn/oauth2/auth.htm?response_type=code&client_id=应用标识&redirect_uri=回调地址&scope=get_user_info&authType=QRCODE&embedMode=true

步骤2：扫码成功后需要在页面中监听扫码结果

    window.addEventListener('message', function(event) {

//这里的event.data 就是登录成功的信息

//数据格式：{ "code": "aaaa", "state": "bbbb" } alert(JSON.stringify(event.data));    });

注意：生成二维码大小固定为200*200px，不支持修改。

我采用的是第二种方法，通过不断调整iframe大小及绝对定位将多余文字隐藏，效果如下：

后面用户使用过程中发现：屏幕分别率或浏览器缩放不同时二维码会被遮挡，就像下图所示：

经过排查找到原因：浏览器缩放时iframe里面页面也会同时改变大小，导致显示不全。那只要监听浏览器缩放，实时改变iframe大小和缩放就能解决此问题：