微信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 Hack
Jul 24 Javascript
关于this和self的使用说明
Aug 01 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 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
解决GD中文乱码问题
2007/02/14 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
jquery的index方法实现tab效果
2011/02/16 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
python编写的最短路径算法
2015/03/25 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
大学生自荐书范文
2013/12/10 职场文书
水利学院求职自荐书
2014/02/01 职场文书
护理专科学生自荐书
2014/07/05 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书