解决火狐新窗口打开网页被拦截问题
阅读更多系列文章请访问我的GitHub 博客，本文示例代码请访问这里。
Demo 运行方式
请在这里下载示例代码，并在终端中运行如下命令启动 Demo：
- 安装依赖
npm install
- 启动 Demo
npm start
示例代码的服务端，由Koa实现。
由于谷歌浏览器无此问题，请在**火狐浏览器**中，打开http://localhost:8080/进行测试。
问题描述
出现问题的场景
-
用户点击支付按钮。
-
前端发起一个 AJAX 请求到服务端。
-
服务端返回一个由支付宝生成的表单，其中带有支付页地址，以及相关参数。
-
前端使用表单的参数，在新窗口打开支付宝的支付页面。
在火狐浏览器中，该操作会被浏览器拦截，如下图所示：
结论是，只要在 AJAX 后，用 JavaScript 触发的跳转，都会被火狐拦截。
能够正常打开的场景
当然，火狐并非对所有场景都进行了拦截，例如这些操作：
-
进行 AJAX 请求后，在当前窗口打开链接。
-
由用户直接点击后，在新窗口打开链接。
前端示例代码
// 通过直接点击，可以在新窗口打开。
// 通过a标签打开和表单提交同样可以。
document
.querySelector('#open')
.addEventListener('click', function () {
window.open(action);
});
// 通过计时器延迟之后，依然可以在新窗口打开。
document
.querySelector('#open')
.addEventListener('click', function () {
setTimeout(() => {
window.open(action);
}, 100);
});
失败的解决方案
列举几个失败的方案，可以在http://localhost:8080/中点击相应按钮查看效果。
前端示例代码
- window.open
// 获取支付宝支付的表单
async function getFormStr() {
const response = await fetch('/getFormStr');
const result = await response.json();
document.querySelector('#formWrapper').innerHTML = result.formStr;
const action = document
.querySelector('#formWrapper form')
.getAttribute('action');
return action;
}
// 方法1：window.open
document
.querySelector('#method1')
.addEventListener('click', async function () {
const action = await getFormStr();
window.open(action);
});
- form.submit
// 方法2：form.submit
document
.querySelector('#method2')
.addEventListener('click', async function () {
const action = await getFormStr();
let formEle = document.createElement('form');
formEle.style.display = 'none';
formEle.method = 'post';
formEle.target = '_blank';
formEle.action = action;
document.body.appendChild(formEle);
formEle.submit();
});
- a 标签打开
// 方法3：a标签打开
document
.querySelector('#method3')
.addEventListener('click', async function () {
const action = await getFormStr();
let anchorEle = document.createElement('a');
anchorEle.href = action;
anchorEle.target = '_blank';
document.body.appendChild(anchorEle);
anchorEle.click();
});
服务端示例代码
// 获取支付宝支付的表单
router.get('/getFormStr', async (ctx, next) => {
const response = await fetch(
'http://rap2.taobao.org:38080/app/mock/250475/getFormStr',
);
const result = await response.json();
ctx.body = result;
await next();
});
成功的解决方案
该问题的解决思路如下：
-
在前端用 form 表单，打开新窗口提交参数。
-
由服务端进行处理之后，直接重定向到支付宝的支付页。
前端示例代码：
- 在页面中创建一个表单，存储相应数据。
- 点击按钮之后，打开新窗口，并提交表单。
// 方法4：服务端重定向
document
.querySelector('#method4')
.addEventListener('click', async function () {
document.querySelector('#redirectForm').submit();
});
服务端示例代码如下：
// 获取支付宝支付的表单，之后重定向到支付宝支付页
router.get('/redirectForm', async (ctx, next) => {
const response = await fetch(
'http://rap2.taobao.org:38080/app/mock/250475/getFormStr',
);
const result = await response.json();
// 进行Entity转换
const decodedFormStr = he.decode(result.formStr, {
isAttributeValue: true,
});
const decodedFormStrArr = decodedFormStr.split('\n');
// 截取表单中的有用参数，并拼接成跳转支付宝的URL
const aliPayUrl = `${decodedFormStrArr[0].match(/action="([\s|\S]*)">/)[1]}&${
decodedFormStrArr[1].match(/name="([\s|\S]*)" value="/)[1]
}=${decodedFormStrArr[1].match(/value="([\s|\S]*)">/)[1]}`;
ctx.response.redirect(aliPayUrl);
await next();
});
Entity 的转换
由于支付宝返回的表单中，有 " 字符，即为 Entity（实体），如果直接表单写入页面，浏览器能够正确将其识别成 " 。
如果你想要查看完整的 Entity 列表，可以点击这里。
但在服务端只能将其当做字符串处理，因此需要用he库进行转换，避免参数拼接出错，如下：
// 进行Entity转换
const decodedFormStr = he.decode(result.formStr, {
isAttributeValue: true,
});
小结
-
现在前端的能力越来越强，但始终还是有其局限性，解决问题的时候不应当把思路局限在前端领域，要充分利用服务端的资源。
-
Entity 虽然很少使用，但遇到的时候可以通过he库进行转换。