微信jssdk在iframe页面失效问题的解决措施
项目需求
微信端添加拍品的页面有照片上传功能,上传时打开一个iframe,该页面用canvas加载用微信jssdk的选择图片接口选择的图片(这里微信会返回一个形如weixin://xxxx的localid,可直接放在img的src里进行预览),可进行放大缩小移动旋转等操作,点击确定按钮将编辑好的图片发送到服务器存成图片
遇到的问题
当子页面功能开发完成后,在主页面通过iframe打开子页面,无法调用微信jssdk接口中的选择图片接口,其他jssdk中的接口也无法正常工作。但是单独打开子页面可以正常工作,主页面的微信分享等也是正常的。
解决思路
首先是以为主页面和子页面同时注入了jssdk的签名信息,是否有可能冲突。经过测试,排除此种可能。通过网络搜索,有网友在此贴中描述的问题与我相似,但没有解决方法 http://www.weixin.com/thread-8022-1-1.html
通过测试可以在主页面进行签名验证,子页面不添加jssdk的签名信息。需要调用jssdk接口时,比如图片选择接口,在jssdk的函数前加parent.,即调用父页面的此函数,经过测试,功能可正常调用。
parent.wx.chooseImage({ success: function (res) { //upload_success(res.localIds); }
值得一提的是,微信jssdk看似功能强大,但是bug不少,真正在项目中使用,经不起推敲。虽然解决的此问题,新的问题又来了,canvas导出图片不能跨域。。。最终还是没有用微信的接口来实现需求。
以上所述是小编给大家介绍的微信jssdk在iframe页面失效问题的解决措施,希望对大家有所帮助!
相关文章
- <iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分。本文给大家介绍jQuery中iframe的操作(点击按钮新增窗口),需要的朋友参考下吧...2016-04-22
JavaScript实现iframe自动高度调整和不同主域名跨域
这篇文章主要介绍了JavaScript实现iframe自动高度调整和不同主域名跨域,作者通过建立一个代理来同步高度调整,需要的朋友可以参考下...2016-03-01- 这篇文章主要介绍了jQuery取得iframe中元素的常用方法,结合实例形式详细分析了jQuery针对iframe中元素获取技巧及注意事项,需要的朋友可以参考下...2016-01-15
- 这篇文章主要介绍了微信jssdk在iframe页面失效问题的解决措施 的相关资料,需要的朋友可以参考下...2016-03-07
- 这篇文章主要为大家详细介绍了微信分享调用jssdk实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-06-15
- 这篇文章主要为大家详细介绍了ASP.NET MVC 微信JS-SDK认证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 这篇文章主要介绍了vue 使用微信jssdk,调用微信相册上传图片功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14
- 下面小编就为大家带来一篇PHP Header失效的原因分析及解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-11-22
- 这篇文章主要向大家介绍了js父页面中使用子页面的方法,即js父页面使用iframe中的函数,感兴趣的朋友可以参考一下...2016-01-12
- 这篇文章主要为大家详细介绍了php如何利用一个文件搞定微信jssdk配置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-08
- 这篇文章主要为大家介绍了最详细的ASP.NET微信JS-SDK支付代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 本篇文章主要对JS出现失效的情况进行总结。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
这篇文章主要介绍了关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析的相关资料,需要的朋友可以参考下...2016-01-12