是否有与 jquery .load() 等效的原生 javascript答案

【问题标题】：Is there a native javascript equivalent to jquery .load()是否有与 jquery .load() 等效的原生 javascript
【发布时间】：2015-08-21 15:42:46
【问题描述】：

与下面的 jquery 等效的原生 javascript 是什么？

$('#anyDiv').load("anyPage.htm");

【问题讨论】：

stackoverflow.com/questions/3972880/…

标签： javascript jquery

【解决方案1】：

你可以试试这个，

window.onload = () => {
    fetch('/path/to/page.html')
    .then(data => {
      return data.text()
    })
    .then( data => {
      document.getElementById("parentContainer").innerHTML = data;
    })
}

【讨论】：

【解决方案2】：

是的，有：

function load(target, url) {
  var r = new XMLHttpRequest();
  r.open("GET", url, true);
  r.onreadystatechange = function () {
    if (r.readyState != 4 || r.status != 200) return;
    target.innerHTML = r.responseText;
  };
  r.send();
}

load(document.getElementById('anyDiv'), 'anyPage.htm');

【讨论】：

不确定您遇到了什么问题，但它确实有效。看到这个小提琴（必须切换到 POST 才能使用 jsfiddle 的 XHR 端点）。 jsfiddle.net/rddw5eac

【解决方案3】：

你可以这样试试。

document.getElementById("anyDiv").innerHTML='<object type="text/html" data="anyPage.html" ></object>';

【讨论】：

我可以用这个来加载页面，但所有原来使用 jquery 脚本的 CSS 现在都不起作用了。 “anyPage.htm”中使用的 CSS 现在出现损坏......或者它可能是需要 CSS 的“
是的<object> 标签需要CSS。在<object> 标签内尝试类似cssfile=http://www.yoursite.com/site1.css" 的内容。欲了解更多信息，请参阅此链接htmlforums.com/html-xhtml/…
显然
只是跟进。我已经能够成功地使用这种方法。唯一不同的是我需要 ("anyPage.htm") 来加载它自己的 CSS。有点像 iframe 的行为方式。即使您的对象在您的网站内，我发现为加载的对象提供一个单独的 CSS 文件会更好。