如何用javascript异步加载链接?

Question

我正在用javascript异步加载链接，但我没有得到脚本和css文件。您可以帮助我组织我的代码，以便我可以在同一域下异步加载页面吗?

document.querySelectorAll('a').forEach(el => {
el.addEventListener('click', (e) => {
e.preventDefault();

var url = el.href;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function () {

var parser = new DOMParser();
const pr = parser.parseFromString(this.responseText, "text/html");
document.querySelector('html').innerHTML=pr.querySelector('html').innerHTML;


}
xhr.send();
})
});

<a href="https://ipapi.co/">Get</a>

后来我尝试包含脚本和css文件，但失败了。

document.querySelectorAll('a').forEach(el => {
el.addEventListener('click', (e) => {
e.preventDefault();

var url = el.href;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function () {

var parser = new DOMParser();
const pr = parser.parseFromString(this.responseText, "text/html");
document.querySelector('html').innerHTML=pr.querySelector('html').innerHTML;
pr.querySelectorAll('head style').forEach(es => {
var sc = document.createElement('style');
sc.src= es.src;
document.querySelector('head').appendChild(sc);
});

pr.querySelectorAll('head script').forEach(es => {
var sc = document.createElement('script');
sc.src= es.src;
document.querySelector('head').appendChild(sc);
});

pr.querySelectorAll('body style').forEach(es => {
var sc = document.createElement('style');
sc.src= es.src;
document.querySelector('body').appendChild(sc);
});

pr.querySelectorAll('body script').forEach(es => {
var sc = document.createElement('script');
sc.src= es.src;
document.querySelector('head').appendChild(sc);
});





}
xhr.send();
})
});

<a href="https://ipapi.co/">2</a>

虽然我用base标记了主站，但我不能完全运行网站。加载页面的javascript文件不工作。通常情况下，位置信息应该直接显示，但它不起作用。我也试过在我自己的网站上，但脚本文件是无用的。你能帮帮我吗?

Answer 1

我认为我的新代码工作得很好。我把它留给需要它的人。

document.querySelectorAll('a').forEach(el => {
el.addEventListener('click', (e) => {
e.preventDefault();
var url = el.href;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function () {


var parser = new DOMParser();
const pr = parser.parseFromString(this.responseText, "text/html");
document.querySelector('html').innerHTML = '';
document.querySelector('html').appendChild(pr.querySelector('html'));
document.querySelectorAll('script').forEach(es => {
var script = document.createElement("script");
if (es.src) {
script.src = es.src;
}
script.innerHTML=es.innerHTML;
document.body.appendChild(script);
});


}
xhr.send();
})
});

<a href="https://ipapi.co/json/">Test</a>