如何实现jQuery Ajax异步调用打开新窗口且不阻塞原有主标签页

原写法阻塞原因 #

直接调用window.open(request, '_blank')触发大体积耗时请求时，若新标签页与原标签页共享同一个浏览器渲染进程，就会导致原页面交互被冻结，这是浏览器进程调度的固有特性。

猜想写法的可行性说明 #

你提到的var O = window.open(); O.Ajax(blablabla)的思路理论上成立，是把请求放到新标签页的上下文执行，但实际落地需要处理新窗口加载时序、跨域限制、新窗口依赖加载等问题，实现成本偏高，不推荐新手使用。

你采用的模拟点击方案标准化实现 #

你用到的rel属性方案是目前最优的解决方案，注意修正拼写错误：正确属性名是noreferrer，搭配noopener使用效果更好，完整实现代码如下：

// request为你的请求地址
const link = document.createElement('a');
link.href = request;
link.target = '_blank';
// 核心属性：让新标签页运行在独立进程，不关联原页面
link.rel = 'noreferrer noopener';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

方案优势 #

• 浏览器会为带该rel属性的新标签页分配独立渲染进程，完全不会阻塞原页面操作
• 原生JS实现，无需依赖jQuery，兼容性覆盖所有主流浏览器
• 不需要处理新窗口的生命周期逻辑，实现成本极低

内容的提问来源于stack exchange，提问作者OldRabbit