微信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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
javascript实现滚动条效果
Mar 24 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Django组件content-type使用方法详解
2019/07/19 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
教师产假请假条范文
2014/04/10 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
公司活动总结怎么写
2014/06/25 职场文书
辞职信格式模板
2015/02/27 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript
Python作用域和名称空间的详细介绍
2022/04/13 Python