微信浏览器iframe嵌套h5，h5页面不能调起微信支付问题处理

最新推荐文章于 2024-08-06 09:51:20 发布
原创 最新推荐文章于 2024-08-06 09:51:20 发布 · 3.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文主要解决微信浏览器iframe嵌套h5页面无法调起微信支付的问题。具体步骤包括：在微信公众号配置网页授权域名获取用户openid，h5页面跳转后端进行微信静默授权获取openid，在微信商户配置jsapi支付域名目录，h5页面通过ajax请求后端接口获取支付参数，最后传递参数给原页面完成支付。

微信浏览器iframe嵌套h5，h5页面不能调起微信支付问题处理

第一步：
微信公众号配置网页授权域名，拿用户openid

第二步：
h5页面跳转后端微信静默授权，拿到用户的openid

第三步：
微信商户配置jsapi支付域名目录(这个域名是嵌套iframe的原页面域名)

第四步:
h5页面ajax请求后端接口拿到调起微信支付的参数。

第五步:
h5页面传递微信支付参数给嵌套iframe的原页面来调起支付，然后完成支付

北纬10°5′
关注
微信h5支付在iframe弹窗的坑
gtcfla_的博客
09-09 5497
官方接入文档 参考链接： 微信H5支付遇到的坑 微信H5支付iframe在苹果Safari的问题 遇到的问题 网络环境未能通过安全验证，请稍后再试 spbill_create_ip问题，如果是客户端拉起mweb_url地址就是客户端ip，如果是服务器请求mweb_url就是服务器ip 商家参数格式有误，请联系商家解决 一般是由于调起H5支付的referer为空导致，Referer 是 HTT...
Safari iframe方式无法呼起微信app之问题探索
proteen的专栏
08-07 7233
微信h5支付测试时，发现使用Safari iframe的方式无法呼起微信app进行支付。本文首先讲述了微信支付的流程、随后进行了两个测试与网上的搜索等进行了一系列的探索，得到了可以证实的结论。
微信支付 iframe子页面 无响应
IT837684734的专栏
07-17 1530
父页面签名 子页面用parent调用父页面支付接口。 parent.wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: appId, ...
APP中webview使用微信H5支付无法支付,iframe中无法支付
你好，我姓刘
08-05 1759
如果只是单纯的webview无法支付宝微信，是因为webview默认只识别http、https，支付宝、微信调起APP使用的是scheme，因此需要设置 WebViewClient，并重shouldOverrideUrlLoading，IOS处理方法相同。微信H5支付将获取的微信链接，通过模拟访问，获取微信支付界面的代码，然后使用正则，获取weixin://开头的支付地址，获取后直接请求地址即可或者通过window.parent 调用iframe父级页面的JS方法进行处理，下方为PHP代码。
在苹果Safari浏览器通过iframe唤起微信或支付宝APP支付
热门推荐
爱生活
08-30 1万+
在苹果Safari浏览器是无法通过iframe来唤起微信或支付宝APP支付的 但可以通过以下方法来完美解决iframe打开APP支付 1. 在iframe中的页面中JS代码： window.top.postMessage({ success: true, pay_url: pay_url }, "*"); 2. 在父页面监听消息 window.addEventListener('me...
微信小程序嵌套iframe_H5嵌入微信小程序踩过的坑
weixin_30806145的博客
12-30 5000
关于背景项目是一个涉及跨移动平台的前端项目，技术使用的是vue，因为项目不是很大，所以没有用到状态管理。主要是用vue将h5项目编译成静态页面放到服务器的制定地址上，然后在小程序测使用，将服务器上的地址传给这个标签。关于遇到的坑值传输的坑因为使用的是，根据我的理解，这个组件类似于html的,但又没有成熟，很多属性都无法使用，基本的比如宽高。下面是的属性。属性名类型默认值说明srcStringweb...
微信支付 h5支付(app中嵌入h5页面)，解决不能回调app、唤醒微信空白页
LoveFly826的博客
12-18 5114
近期，公司内部移动办公系统要实现微信支付模块，用于员工缴费，微信支付页面用h5开发，嵌入移动办公系统，后台是java。 大致流程如下: 1.前端页面生成订单(确定支付金额、订单详情，此步骤根据业务而定) 2.调用后台预支付接口，改接口需要请求微信统一支付接口，拿到返回链接，直接将该链接(深度链技术，可以理解为微信的协议，用于唤醒微信)返回给前端 3.前端拿到连接后，直接open即可，就会唤醒微信。...
HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法
09-28
就想弄一个winform结合html5的一个小东西，突有心血来潮，想在里面嵌套一个微信网页版，下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法，一起看看吧
微信jssdk在iframe页面失效问题的解决措施
10-22
然而，有时候开发者可能会遇到在iframe页面中微信jssdk失效的问题，这通常是因为微信jssdk出于安全考虑，对在iframe中使用做了一些限制。 首先，要理解微信jssdk在iframe页面失效的根本原因。微信jssdk的使用依赖于...
h5网页嵌套安卓苹果APP内 微信内打开H5等 遇到的各种适配问题与解决方案汇总 --持续更新
Beatingworldline的博客
08-06 2050
在站外拉起APP 可以用UniversalLinks。在站外拉起APP 可以用scheme协议。微信内可以借用友盟封装uslink实现。微信内可以借用应用宝实现。
微信内置浏览器调试工具
04-17
微信内置浏览器调试工具 微信调试 公众号调试 微信浏览器调试
小程序使用webview嵌套H5中使用iframe真机无法跳转 wx.miniProgram.navigateTo等失效问题
u010439874的博客
08-20 3765
点击支付
HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版
W3R32R32432的博客
01-08 1589
昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西，突有兴致，想在里面嵌套一个微信网页版。 好了，想法一出来，就行动吧，最终效果如下图： 一开始就打算在页面里面嵌套一个iframe指向https://wx.qq.com就OK了，但是我还是太天真，微信网页版...
iOS 中 微信等app h5 页面 iframe 调用高度自扩展问题及解决
dx_shendu的博客
06-02 779
但是这种方法会导致 iframe 中的 content 显示不全，超出 iframe 高度的部分会直接被裁剪掉。第二种：用一个 div 包裹 iframe，并在 div 中处理滚动事件。第一种：直接将 iframe 设置成 scrolling no。
H5页面兼容微信内置功能wx.ready,wx.getLocation在iframe内遇到无法获取位置也不报错问题
HA_LLL的博客
06-29 2646
前提：本人项目中HTML5使用了iframe嵌套页面，在嵌套页面使用wx.getLocation()一直没有效果。 然后发现wx.config和wx.ready不能放在内嵌页面，否则访问不到，正确代码如下。 外层页面代码：（部分） <div class="bottom-nav"> <ul> <li class="j-bottomalink active"> <a href="<%=basePath%>weChat/index/v
微信定位
aao7680的博客
02-21 359
$(function(){ wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识 timestamp: '', // 必填，生成签名的时间戳 no...
【支付】h5端在 微信内置浏览器中 微信支付 uniapp h5端绑定微信（微信内置浏览器）
AAAXiaoApple的博客
03-20 1448
目前是在 登录成功后，自动绑定微信，首次 登录会有弹窗确定出现，往后是静默绑定，只能在线上测试。
最近在做微信公众号支付功能，iOS正常唤起微信支付并支付成功；android唤不起微信支付，显示失败。
chenzfyy的博客
01-21 1万+
在调用微信支付的时候遇到提示“URL未注册”，这通常是因为没有在微信支付后台正确配置授权目录的问题，但我所遇到的并非如此。 我们的应用中有3个页面用到微信支付： http://example.com/#!/cart/index http://example.com/#!/order/orderlist http://example.com/#!/order/orderinfo 微信
微信小程序下web-view和浏览器下的iframe详解
weixin_51958960的博客
08-28 6368
3、可通过window.addEventListener("message" 传参。3、web-view向微信小程序传惨可通过特定的时机传参。一、微信小程序web-view通信及使用。2、可通过url问号拼接形式传参。iframe链接下的js接参代码。1、可通过css自定义样式大小。二、iframe使用。
页面加载失败:-1002 unsupported URL 微信H5支付
最新发布
07-02
在使用微信H5支付时，若出现页面加载失败并提示错误代码 `-1002`（表示 `unsupported URL`），通常与请求的URL格式、域名配置或用户代理限制有关。以下是可能导致该问题的原因及解决方案： ### 1. 检查支付域名配置 微信H5支付要求商户在微信商户平台中配置**支付域名**，并且该域名必须通过ICP备案。如果支付链接使用的域名未在商户平台注册或不符合规范，将导致页面无法加载[^1]。 - 登录 [微信商户平台](https://pay.weixin.qq.com/)。 - 进入【产品中心】 > 【H5支付】，检查“支付域名”是否已正确设置。 - 确保支付链接的域名与配置的一致，并且不包含路径或参数。 ### 2. 验证URL编码与格式 确保用于发起支付的URL是经过正确编码的，并且符合RFC3986标准。特殊字符如空格、中文等需要进行`URL Encode`处理。 例如： ```python import urllib.parse url = "https://example.com/pay?order_id=123&redirect_url=https://service.example.com/return" encoded_url = urllib.parse.quote(url, safe='') print(encoded_url) ``` ### 3. 处理 `X-Frame-Options` 安全策略限制 当客户尝试将微信支付页面嵌入 `<iframe>` 时，可能会遇到如下报错： ``` Refused to display 'URL' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN' ``` 这表明微信服务器设置了安全头 `X-Frame-Options: SAMEORIGIN`，禁止页面被嵌套在第三方网站的 `<iframe>` 中。此限制为浏览器安全机制的一部分，不能绕过[^1]。 解决方式： - 不要尝试将微信支付页面嵌入 `<iframe>`。 - 使用独立窗口或跳转方式打开支付页面。 ### 4. 用户代理（User-Agent）限制 微信H5支付仅支持在微信内置浏览器中打开。如果支付页面是在非微信浏览器中加载，也会触发 `-1002` 错误。 可通过检测 User-Agent 判断是否运行在微信浏览器中： ```javascript function isWeChatBrowser() { var ua = navigator.userAgent.toLowerCase(); return /micromessenger/.test(ua); } if (!isWeChatBrowser()) { alert("请在微信浏览器中打开支付页面"); } ``` ### 5. SSL/TLS 证书有效性 确保支付页面的URL使用 HTTPS 协议，并且SSL证书有效、可信。若证书过期或使用自签名证书，也可能导致页面加载失败。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值