异步请求完成后执行window.open打开新窗口被浏览器拦截创建一个html元素，给html元素绑定跳转事件，异步请求

场景描述

由于一些业务需求，我们有时候需要根据异步请求回来的内容例如id作为参数来打开一个详情页面

遇到问题

这个时候我们会遇到一个问题，那就是浏览器会拦截我们打开新窗口这个操作

原因

浏览器的安全机制，会认为这是个非法操作，是用户不希望看到的页面

解决方案(以react系统举例子)

创建一个html元素，给html元素绑定跳转事件，异步请求完成后模拟用户点击事件。

创建一个hrml元素

const ref = useRef<HTMLDivElement>(null);
<div ref={ref} className={styles.jump}>
  跳转
</div>

执行一个异步操作, 模拟用户点击事件

promise.then((res) => {
  const { id } = res;
  const { current } = ref;
  current.onclick = () => {
    window.open(
       `${window.origin}/_${project.code}/bussiness/execute/detail?id=${log_id}`,
        '_blank'
      );
    };
  current.click();
})