支付宝付款弹窗 被浏览器拦截

网站在点击付款后,发现支付宝弹窗会被浏览器误以为广告拦截,无法打开支付宝付款页面。

 

网上教的一个办法是在onclick中用window.open打开链接然后把表单数据放在链接参数里,在新页面进行付款表单提交处理。

但亲测发现这样仍然会被浏览器拦截,而且我还需要在付款后进行后台的其他操作。

 

接着发现如果在onclick中直接指定window.open(),打开的是空白窗口的话,浏览器并不会拦截。

这就好办了,打开空窗口并将返回的窗口变量作为参数传给后台,在后台的函数中给新窗口一个地址定向即可:

<div id="orderListSubmit" onclick="newOrderClick(window.open());">提交订单</div>
function newOrderClick(newWindow)
{
	//各种操作....
	//给新建窗口提交表单
	var formData = $('#newOrder form').serializeArray();
	var formDataString = formData[0]['name'] + '=' + formData[0]['value'];
	for (var i=1; i<formData.length; i++)
		formDataString += '&' + formData[i]['name'] + '=' + formData[i]['value'];
	newWindow.location = 'orderCenter.html?' + formDataString;
	//各种操作....
}

 

<think>嗯,用户的问题是在UniApp中实现长按复制链接并在浏览器中打开的功能。首先,我需要回忆一下UniApp的相关知识,特别是H5端的实现方式。记得UniApp本身在H5环境下没有直接提供复制到剪贴板的API,所以可能需要借助其他方法。 根据用户提供的引用[^1],他们提到可以使用clipboard插件或者原生JavaScript来实现复制功能。Clipboard.js是一个常用的库,但用户觉得安装麻烦,所以可能需要一个更简单的方法。引用里提到有一个可以在H5中直接使用的方法,可能涉及到document.execCommand('copy'),不过现在这个命令已经过时了,但可能在某些浏览器还能用。不过现在更推荐使用Clipboard API,比如navigator.clipboard.writeText,但需要注意兼容性问题。 然后,关于长按事件,UniApp中如何处理呢?在H5中,长按可以通过@longpress事件来触发,或者在移动端使用touchstart和touchend的组合。可能需要测试一下在不同平台的兼容性。 接下来,复制链接后需要引导用户跳转到浏览器打开。这里可能需要使用window.location.href或者window.open,但浏览器可能会拦截弹出窗口,所以可能需要用户手动操作。另外,引用[^2]中提到了拉起支付宝APP的例子,使用特定的URL Scheme,但这里只需要打开浏览器,所以可能需要生成一个链接,用户点击后跳转到外部浏览器。 然后,整合这两个功能:长按某个元素触发复制,然后提示用户去浏览器打开。可能需要一个提示框,引导用户粘贴链接并访问。 另外,需要注意权限问题,某些浏览器可能需要用户手势(比如点击)才能允许复制操作,所以长按事件是否能触发可能需要测试。如果不行,可能需要改为点击按钮复制,但用户需求是长按,所以需要找到解决方案。 可能还需要处理移动端和PC端的兼容性问题,比如在移动端长按会触发上下文菜单,可能需要阻止默认行为。引用[^3]提到了不同浏览器的差异,比如火狐和Chrome的不同表现,所以在代码中可能需要做一些适配。 总结步骤应该是:1. 处理长按事件,触发复制操作;2. 使用兼容性好的复制方法,比如结合execCommand和Clipboard API;3. 复制成功后提示用户,并提供跳转到浏览器的链接或引导用户手动打开。 现在,需要把这些思路整理成结构化的步骤,确保代码示例正确,并处理可能的兼容性问题。同时,生成相关问题,帮助用户进一步了解相关知识。</think>### 分步实现方法 #### 1. **长按复制链接功能** 在 UniApp 的 H5 端,需通过原生 JavaScript 实现复制功能。以下是核心步骤: - **绑定长按事件**:使用 `@longpress` 或 `@touchstart` 监听长按动作。 - **调用剪贴板 API**: - **兼容方案**:优先使用现代浏览器的 `navigator.clipboard.writeText`,若不支持则回退到 `document.execCommand('copy')`。 - **提示用户**:通过弹窗或 Toast 告知复制成功。 ```html <template> <view @longpress="handleLongPress('https://example.com')"> 长按此处复制链接 </view> </template> <script> export default { methods: { handleLongPress(url) { const textArea = document.createElement('textarea'); textArea.value = url; document.body.appendChild(textArea); textArea.select(); try { if (navigator.clipboard) { navigator.clipboard.writeText(url); // 推荐方式,需 HTTPS 环境 } else { document.execCommand('copy'); // 兼容旧浏览器 } uni.showToast({ title: '已复制链接', icon: 'success' }); } catch (err) { uni.showToast({ title: '复制失败', icon: 'none' }); } document.body.removeChild(textArea); } } } </script> ``` #### 2. **浏览器中打开链接** 复制后需引导用户手动打开浏览器,或通过以下方式自动跳转: ```javascript // 直接跳转(可能被浏览器拦截) window.location.href = 'https://example.com'; // 新窗口打开(需用户触发) window.open('https://example.com', '_blank'); ``` #### 3. **完整流程优化** - **添加提示**:建议用户粘贴到浏览器地址栏。 - **兼容性处理**:针对 iOS/Android 的差异调整交互逻辑(如部分系统需手动粘贴)。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值