Is it possible using JavaScript in the background to load any HTML page and then "go" to it?

More precisely, the page should be loaded in the background as a whole, along with all the scripts, styles, images, etc. on it. After all the elements are loaded, this page should replace the current content of the document, i.e. the effect should be as if the user has clicked on the link and the page has loaded, but the script needs to do so.

Addition. The download page is on the same domain. The contents of the address bar after loading does not matter. It is forbidden to use any frameworks - the solution should be on "pure" JS .

  • From the brutal options - zafafatchit page with inline resources and replace the root dom. - Vladimir Gamalyan
  • maybe in the invisible iframe load the page? And after the download is complete, expand it in the entire document .. - Sergiks
  • Another option is to use the shadow DOM , but this is still an experimental technology. - Sergiks
  • @Sergiks Invisible iframe does not fit, you just need to replace the content of the document. Shadow DOM is interesting. Did not even know about this technology. - user194374
  • @VladimirGamalian The problem, unfortunately, is that the resources are not zainlaynit ... - user194374

2 answers 2

Suppose we have a document index.php

 <!DOCTYPE html> <html> <head> <meta charset='cp1251'> </head> <body> документ 1 </body> <script src='script1.js'></script> </html>

And the second document is next to new.php

 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> </head> <body> документ 2 </body> <script src='script2.js'></script> </html>

In the first script, we execute the query, get a new document, and upon receipt we simply replace all the content. Here are just the scripts and styles will be loaded separately

 xhr = new XMLHttpRequest(); xhr.open('GET', 'new.php', true); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { document.write(xhr.responseText); } }

Upon receiving the answer, you can temporarily write it to the element of the current document. Then search for pictures, scripts, styles and recursively load them.

 if(xhr.readyState == 4 && xhr.status == 200) { tmp = document.createElement('div'); tmp.style.display = 'none'; document.body.appendChild(tmp); tmp.innerHTML = xhr.responseText; resources = Array.from(tmp.querySelectorAll('script, img, link')); resources.forEach(function(e, i) { link = e.src || e.href; console.log(link); }); // пройтись по массиву resources и всё загрузить }

When resources are loaded, execute document.write(xhr.responseText);

  • styles that link to images; scripts that load other scripts - do not parse all. Same requirejs. - Sergiks
  • @Sergiks, yes, and the pictures in the styles, there is no way ... although you can get the path from the styles, but this is a huge crutch - Mr. Black

On the client side, this problem can be solved, it is not entirely desirable.

Immediately I warn you, the best solution is partially implemented on the server side.

The solution on the client is only an iframe. By the way any other option would not be a priori correct. As from the client we are limited to request of the page.

But a more correct option, to give the server a template page with a string. And then through js paste its contents into an invisible div and draw it.

Both options are complicated, and if the complexity of the second is obvious, then in the first version you will have to deal with the interaction of JS from the main window in the iframe. In addition, the iframe tag specification becomes obsolete, and most likely in the near future it will be canceled.

UPD.

In principle, the commentator is right about both minuses, then you can simply replace the entire dom from the root through the same js. But this is a very cruel option. After performing the replacement, it is imperative to trigger the onload event.

  • 1. possible conflict of styles and scripts; 2. loaded scripts will not receive the document onload and will not be executed. - Sergiks