微信jssdk在iframe页面失效问题的解决方案
实例:
在父页面打开一个窗口,在iframe窗口内,调用微信jssdk扫一扫,实现密码扫码填充功能。开始在iframe窗口内生成签名直接调用wx.scanQRCode,发现有问题。(当子页面功能开发完成后,在主页面通过iframe打开子页面,无法调用微信jssdk接口中的扫扫一扫接口,其他jssdk中的接口也无法正常工作。但是单独打开子页面可以正常工作)解决方案,在父页面引入jweixin-1.0.0.js,执行wx.config(。。。),然后在iframe框子页面parent.wx.scanQRCode()调用来实现。
父页面代码:
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
/*
* 注意:
* 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:
* 邮箱地址:weixin-open@qq.com
* 邮件主题:【微信JS-SDK反馈】具体问题
* 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。
*/
wx.config({
debug: 0,
appId: '{$share_config['appId']}',
timestamp: {$share_config['timestamp']},
nonceStr: '{$share_config['nonceStr']}',
signature: '{$share_config['signature']}',
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});
</script>
子页面代码:
<script>
$(function (){
$("[link=saoma]").click(function (){
parent.wx.scanQRCode({
needResult: 1,
desc: 'scanQRCode desc',
success: function (res) {
//alert(JSON.stringify(res));
$("#card_pwd").val(res.resultStr)
}
});
});
});
</script>
效果图:
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:微信jssdk在iframe页面失效问题的解决方案 - https://wlphp.com/?post=293