微信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 相关文章推荐
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
深入浅析react native es6语法
Dec 09 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python输入错误密码用户锁定实现方法
2017/11/27 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
告知书格式
2015/07/01 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
用Python实现屏幕截图详解
2022/01/22 Python
frg-100简单操作(设置)说明
2022/04/05 无线电