微信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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
面试常见的js算法题
Mar 23 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
Vue下的国际化处理方法
Dec 18 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 CKEditor 上传图片实现代码
2009/11/06 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Python实现简单的语音识别系统
2017/12/13 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python super的使用方法及实例详解
2019/09/25 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
this关键字的作用
2016/01/30 面试题
黄金搭档广告词
2014/03/21 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
对照检查剖析材料
2014/09/30 职场文书
工作简报怎么写
2015/07/21 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL