Is there a way to load a whole URL under the same domain before redirecting to a blank window to wait its loading using JavaScript?

Question

Say I have two pages:

index.html and detail-product.html as the index page and a product detail page.

In the index page, I have a link to the product page:

<a target="_self" href="detail-product.html">Product Details</a>

If the user clicks the link, the browser would open a blank page as the product page loading.

I want to make this experience more smooth. Is it possible to do something that would allow the index page to hold and wait until the product page loads, then open it in a very fast speed.

For instance, I would do something like this:

$('a').click(function(){
  var targetLink = $(this).attr('href');
  var loadSuccessCallback = function(){
    window.href = targetLink;
  }
  holdLoading(loadSuccessCallback);
})
function holadLoading(cb) {
  // do the loading thing
  // .....
  // if the page is loaded, then call "cb".
}

Answer 1

Yes if the link is on the same server (not local file system) you can use fetch to get it's contents, store it into a variable, then set the HTML of the entire page to the contents of fetch. Only thing is the URL will be the same for both pages, so you can add a #otherPage at the end of the URL afterwards, and make a JavaScript function that automatically reads location.hash on page load for later

So fetch is

fetch("detail-product.html").then(r=>r.text()).then(r=>{location.hash="details";document.getElementsByTagName("html")[0].innerHTML=r})

OR you can make a new Blob with the content of the text and open a new tab with the object URL of the blob

OR make a new iframe on the main page with the blob URL and set the location hash of the main window when button is pressed, and on page load read the hash, do the fetch according to the hash, and set the iframe src to the blob URL of the fetched text after load

Answer 2

Your question has already been answered so I'll write about an alternative...

I think you should make the browser preload the other page content after it has finished loading the current page, because more than smooth, the User Experience of what you want sounds like it could push users away after some time of wondering why the supposed link they clicked it's not taking them anywhere. It also has SEO issues.

Performance-wise the best way to do it would be with prerender:

<link rel="prerender" href="https://example.com/content/to/prerender">

https://developer.mozilla.org/en-US/docs/Glossary/prerender

https://caniuse.com/#feat=link-rel-prerender

...But if you care about browser compatibility you can use prefetch

<link rel="prefetch" href="https://www.example.com/solutions" />

https://developer.mozilla.org/en-US/docs/Glossary/Prefetch

https://caniuse.com/#feat=link-rel-prefetch