微信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中的Rest参数和参数默认值
Jul 28 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
基于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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP中include与require使用方法区别详解
2013/10/19 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
使用python生成目录树
2018/03/29 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
用 Python 制作地球仪的方法
2020/04/24 Python
python 8种必备的gui库
2020/08/27 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
毕业生就业自荐书
2013/12/15 职场文书
股东协议书
2014/04/14 职场文书
英语教研活动总结
2014/07/02 职场文书
业务员岗位职责范本
2015/04/03 职场文书
检讨书怎么写?
2019/06/21 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript