企业微信/政务微信 previewFile方法在有iframe情况下且iOS点击无效解决方案
问题的现象:
h5 页面,对同一个附件,有两个按钮,本地查看,在线查看。
- 本地查看调用的wx.previewFile预览附件。
- 在线查看是用一个弹出的div包含一个全屏的iframe,iframe地址是在线office预览附件的地址。
针对上面两个按钮,页面打开后,分别点2个按钮,都能正常响应,说明本地查看的按钮功能正常。但是在使用中测试下来,在使用以下步骤情况下,previewFile没有响应:
- 点击本地查看按钮,可以正常打开,关闭预览页面,后退到页面,(重复此步骤多次都正常打开)。
- 再点击在线查看,正常打开,关闭弹窗
- 再点击本地查看按钮,没有响应
注:上述情况只在iOS 有问题,android是没有问题的。
解决方式
找官方技术支持
遇到这种情况,首先找微信的技术团队,可惜沟通下来,他们说APP没有问题,无法支持,让自己想办法!!!
(临时方案) 非官方方案
先给出我的方案
在“在线查看”按钮点击打开的div弹窗后,用户点击关闭div弹窗时,触发的事件中,增加以下一段代码:
// 修复出现iframe后,导致政务微信的接口失效,主动改变url地址,hack下政务微信的接口响应。
window.location.hash = new Date().getTime().toString()
经测试下来,重复问题现象的步骤,问题得以修复。
此方案的思路是
- 根据企业微信文档调用JS方法,不同的url必须要刷新ticket才可以重新调用,
- 根据上面这个,猜测,虽然我们用div+iframe弹窗没有刷新url使url地址发生变更,但是在h5里用过iframe的同学应该知道,在iOS h5里面有iframe,是会往histroy里面增加一条记录的,要验证这个现象,只要你在页面放一个iframe,再调用history.back(), 会发现必须调用两次back才可以把页面返回到上一个页面。
- 根据第二点,猜测企业微信的iOS wkwebview监听了url变化事件,在调用wx.previewFile方法时,会校验jsticket是不是和当前的url地址一致,因为iframe的原因,webview以为iframe里的src是当前的地址,所以导致调用wx.previewFile验证失败,没有响应(测试是这样的原因,具体不知道是不是)
- 根据第三点猜测,那么我在关闭iframe弹窗的时候,设置一下location的hash,即url地址后面#xxx内容,来使wkwebview以为url变化了,重新设置当前wkwebview的url,再调用wx.previewFile时,校验url正确,所以正常了。
以上的方案是基于黑盒猜测,实际原因不知道是不是,但是解决了目前的问题,当企业微信能修复这个问题后,再采用官方的方案吧。