微信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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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电台频率大全 - 1 北京市
2020/03/11 无线电
配置支持SSI
2006/11/25 PHP
php去掉文件前几行的方法
2015/07/29 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
详解python配置虚拟环境
2019/04/08 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
学生感冒英文请假条
2014/02/04 职场文书
公司请假条格式
2014/04/11 职场文书
项目采购员岗位职责
2014/04/15 职场文书
综合素质自我评价评语
2015/03/06 职场文书
党员带头倡议书
2015/04/29 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
Python进程间的通信之语法学习
2022/04/11 Python
Go语言入门exec的基本使用
2022/05/20 Golang