微信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 相关文章推荐
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
基于python实现微信模板消息
2015/12/21 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
PyQt5实现简易计算器
2020/05/30 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
为什么说python更适合树莓派编程
2020/07/20 Python
python如何实现DES加密
2020/09/21 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
傲盾软件面试题
2015/08/17 面试题
年终自我鉴定
2013/10/09 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书