微信jssdk在iframe页面失效问题的解决措施


Posted in Javascript onMarch 03, 2016

项目需求

微信端添加拍品的页面有照片上传功能,上传时打开一个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页面失效问题的解决措施,希望对大家有所帮助!

Javascript 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
基于javascript html5实现多文件上传
Mar 03 #Javascript
编写高质量JavaScript代码的基本要点
Mar 02 #Javascript
JS获取当前脚本文件的绝对路径
Mar 02 #Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 #Javascript
浅谈JS原型对象和原型链
Mar 02 #Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 #Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 #Javascript
You might like
用Socket发送电子邮件
2006/10/09 PHP
php实现文件编码批量转换
2014/03/10 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
php实现微信企业转账功能
2018/10/02 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
对python sklearn one-hot编码详解
2018/07/10 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
数据库专业英语
2012/11/30 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
自我鉴定怎么写
2013/12/05 职场文书
大学生入党思想汇报
2014/01/01 职场文书
运动会跳远广播稿
2014/02/04 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
检讨书1000字
2014/10/11 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书