微信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 相关文章推荐
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
JavaScript事件委托实例分析
May 26 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
js实现计算器功能
Aug 10 Javascript
vue中的循环对象属性和属性值用法
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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
jquery延迟对象解析
2016/10/26 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python比较两个列表大小的方法
2015/07/11 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
详解python3中的真值测试
2018/08/13 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
python将数组n等分的实例
2019/12/02 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
一个入门级python爬虫教程详解
2021/01/27 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
大班上学期幼儿评语
2014/04/30 职场文书
医学检验专业自荐信
2014/09/18 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
酒店开业主持词
2015/07/02 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python