1

As in the question how to make the code given below change the URL in your browser after the request is made and after loading the content of the page? I don't know how to do it myself, I've been trying to do it for days.

If possible, how to make JS scripts loaded from a new page (after the request) work (innerHTML does not interpret as a result of scripts).

document.addEventListener('click', function(event) {
  if (event.target.tagName !== "A" || !event.target.href) return;
    document.body.style.opacity = 0;
  event.preventDefault();
  document.body.addEventListener("transitionend", function() {
  var res = new XMLHttpRequest();
  res.addEventListener("load", function() {
       if (res.status != 200) {
 console.log(`Error ${res.status}: ${res.statusText}`);
  } else { 
    document.querySelector('html').innerHTML =
      this.response;
  }
  });
  res.open("GET", event.target.href);
  res.send();
});
});

If more clarification is needed, please comment below.

Majonez.exe
  • 412
  • 8
  • 22
  • Does this answer your question? [How to change url in address bar?](https://stackoverflow.com/questions/18082611/how-to-change-url-in-address-bar) – Luke Jan 12 '20 at 16:27
  • It doesn't make much sense to first create some HTML to the old page and immediately change the location. Anyway, if you want to execute a script from the response text, you've at first to put the content into a `documentFragment`. Then create new empty script element, get `text` property of the already existing script in the fragment, and put that text to the newly-created script element. Then append the newly-created script element to the fragment, and finally append the fragment to `document.body`. Notice, that you've to preserve the original `html` tag. Or simply use a regular form ... – Teemu Jan 12 '20 at 16:29
  • @LuketheGeek No, that's not it, I was looking for how to do it at XHR but I didn't find a solution – Majonez.exe Jan 12 '20 at 16:39
  • 1
    @MAJO You use XHR to stay in the current page, it's not useful to try to replace the content of the entire page using XHR (as `document.querySelector('html').innerHTML = ..` shows the goal). If you need a new page to load, send the request with a regular form. – Teemu Jan 12 '20 at 16:41
  • @MAJO What you can do is send the XHR first and update the html. Than, you use the History API to change the URL in the browser. To answer your second question, once you insert a script tag from javascript using `innerHtml`, the script tag should execute immediately. – Luke Jan 12 '20 at 16:44
  • But I don't know if I can use the `history` in the XHR – Majonez.exe Jan 12 '20 at 16:55
  • Once again, XHR is not a tool you use to solve your navigation here. Use a regular form instead. – Teemu Jan 12 '20 at 16:56
  • I don't know what this Regular Form is about – Majonez.exe Jan 12 '20 at 17:02
  • A HTML form, `
    ` element in the markup. Replacing the entire page with XHR is a very complex task, especially, if there are also scripts on the new page, a form will do all that "for free". Or actually even the existing `a` tag you have now would work, no need for a form at all.
     – Teemu Jan 12 '20 at 17:04
  • If you still want to try, here's how you can [execute a script](https://jsfiddle.net/paLvgfdj/) from the response. But it's good to know, that you can't replace any of the meta tags in the head with a new content on an existing page without really loading a new page, setting any values is ignored. – Teemu Jan 12 '20 at 17:24
  • Thank you for the example, but I unfortunately need to replace the entire HTML content – Majonez.exe Jan 12 '20 at 17:31
  • 1
    Well, you've been adviced, but good luck for trying ... – Teemu Jan 12 '20 at 17:43

1 Answers1

0

Actually, you can change the entire page in the AJAX callback. Prepare the back-end code to response with the DTD included in the document, and obfuscate all the ending script tags, ex. <\/script>. Then, in the callback, do this:

else { 
    document.write(res.responseText);
}

That's it. But, this is against all the standards and good practices, don't use it.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • But i think the `document.write` is not the best practice. – Majonez.exe Jan 14 '20 at 07:40
  • @MAJO Definitely it isn't, but it's the only way to do what you want to do. Maybe you should explain in details, why on earth you want to create the entire page with XHR instead of loading a new page ..? If it has something to do with the page transition, I guess that's the real problem you've at hands, and asking about loading a page with XHR is actually a XY-problem. – Teemu Jan 14 '20 at 08:22