如何使用ajax和纯javascript加载HTML(其中包含javascript)内容

Question

我一直在做一个使用"一页应用程序"概念的项目：所有页面都是使用jQuery和ajax加载的，类似于以下内容：

$.ajax({
url : some_url
,data: some_data
,success : function(resp){
$("#somediv").html( resp.view ) 
}  
});

像这样，它一直运行良好。"resp.view"中包含的所有HTML、CSS和JS都表现得很有魅力。

但是，有一天我需要在没有jQuery:的情况下完成它

var xhr = new XMLHttpRequest();
xhr.open("POST",  someurl);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
somediv.innerHTML = data.view;
}
};
xhr.send(some_data);

纯JS方式可以很好地在"data.view"上只加载HTML和CSS include…但是，它不执行返回的HTML中包含的任何javascript。。。

我可以使用document.head.append来添加我需要的所有脚本，但是，在html中有一些JS代码。。。而且，我处理了很多不同的页面作为回复。。。因此，不能手动添加依赖项。

因此：

如何将包含样式和脚本的HTML页面的字符串插入到当前页面，并使其表现为这样的HTML页面？jQuery是如何做到这一点的？

范围

我现在正在编写一个脚本，将一些html代码注入我客户的网站。而且，当我调用脚本并调用ajax请求页面时，我不能确定jQuery是否加载在DOM上。这就是为什么在这种情况下，我需要纯JS。然后，返回的HTML具有jQuery源代码和其他代码。

我找到的解决这个问题的方法是预先将本地jQuery源代码加载到DOM中，然后一如既往地使用jQueryajax来完成这项工作。它是有效的，但是，我很好奇怎么会这样！

Answer 1

对于通过AJAX加载的JS，您可以执行以下操作：

somediv.innerHTML = data.view;
somediv.querySelectorAll('script').forEach(function(script) {
var el = document.createElement('script');
if (script.src) {
el.setAttribute('src', script.src)
} else {
el.innerHTML = script.innerHTML;
}
script.replaceWith(el);
});