remove "about:blank" when window.open()

Question

I have a function that will dynamicaly window.open() to a specific resource. I would like to remove the "about:blank" that appears while the page load and display a loading message.

Is it possible ?

Here is my function :

const windowReference = window.open();

    try {
        AppProductAuthenticationApi.getUrlAccess(apuaId, query).then((res: {urlAccess: string} | undefined | null) => {
            if (res && res.urlAccess) {
                windowReference &&
                    (windowReference.location = `${res.urlAccess}${
                        null !== queryString && typeof queryString !== "undefined" ? queryString : ""
                    }`);
            } else {
                windowReference && windowReference.close();
            }
        });
    }

Answer 1

Yes, it is possible to remove the "about:blank" page and display a loading message while the page is loading. Here is one way you could do this:

Add an event listener to the load event of the new window.

windowReference.addEventListener('load', () => { Do something when the page has finished loading });

Inside the event listener function, you can use the windowReference.document property to access the document object of the new window:

    windowReference.addEventListener('load', () => {
 windowReference.document.body.innerHTML = '';
windowReference.document.body.innerHTML = '<h1>Loading...</h1>';
});