After the asynchronous request is complete, run window.open to open a new window that is blocked by the browser

Scene description

Due to business requirements, we sometimes need to open a detail page based on what comes back from an asynchronous request, such as id as a parameter

Have a problem

One problem is that the browser blocks the opening of a new window

why

The browser’s security mechanism will consider this to be an illegal operation and a page the user does not want to see

Solution (Use the React system as an example)

• Create an HTML element, bind the HTML element with a jump event, and simulate the user click event after the asynchronous request completes.
  • Create an HRML element

  const ref = useRef<HTMLDivElement>(null); <div ref={ref} className={styles.jump}> jump </div>Copy the code

  • Perform an asynchronous operation that simulates the user click event

  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(); })Copy the code