如何将后请求的响应放入新窗口/选项卡

Question

I have this working example of how to use POST and put the server-generated html in a new window:

const response = await this.axiosInstance.post(url, postData)
const htmlResponse = response.data
const newWindow = window.open()
newWindow.document.write(htmlResponse)

However I'm not sure if this is the best or even correct way to do it. I see a few warnings with this. I get a warning on the last line that newWindow is possibly ' null '. If switching to TypeScript I am also not sure the type of htmlResponse . I would assume Document , but write() only supports string , so it might be the correct classification.

Is there a better way to put the content of a post-request into a new window?

Update: The content-type is of type text/html; charset=UTF-8 , not sure if it changes anything.

Answer 1

What you have there might be enough for your use case. One might recommend waiting for some form of a ready event before manipulating the DOM.

const newWindow = window.open();
newWindow.onload = (event, f, g, h) => newWindow.document.write('Do great things.');

A much better solution might be fetching actual data instead of an HTML string from the server, creating a template page to receive the data, and rendering a well-formatted page.

The Window.postMessage() API could be used to send data between parent and child windows. This is especially useful if you need to circumvent the Same-origin policy .

I have made several assumptions, and this suggestion might not work for your use case.