微信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 相关文章推荐
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
使用JS实现简易计算器
Jun 14 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
php开发环境配置记录
2011/01/14 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
Django视图类型总结
2021/02/17 Python
详解rem 适配布局
2018/10/31 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
2015学生会文艺部工作总结
2015/04/03 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Python echarts实现数据可视化实例详解
2022/03/03 Python
Python代码实现双链表
2022/05/25 Python