微信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的for循环获取radio选中的值
Oct 21 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
基于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
PHP学习笔记之php文件操作
2016/06/03 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
详解php实现页面静态化原理
2017/06/21 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
Python标准库与第三方库详解
2014/07/22 Python
Python实现自动发送邮件功能
2021/03/02 Python
详解python3中tkinter知识点
2018/06/21 Python
python实现周期方波信号频谱图
2018/07/21 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
简单了解python反射机制的一些知识
2019/07/13 Python
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
村官工作鉴定评语
2014/01/27 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
联村联户简报
2015/07/21 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
情况说明书格式及范文
2019/06/24 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python