如何将文件内容分配到Javascript变量中

好的，这很简单，但我有点需要noob的帮助

我想做一些简单的事情： 将HTML文件内容分配给JS变量，然后使用innerHTML属性将此HTML代码传递到页面元素

这可以通过HtmlHTTPRequest轻松完成，但是，我不确定我应该使用的确切代码是什么

以下是我想要实现的目标：

var foo = contents_of_an_html_file (file.html)
document.getElementById('preview').innerHTML = foo;

---

希望您有所启发：

虽然我不确定您是否在使用jQuery，但如果您使用的是直接的xhr，您似乎不知道，但可能值得研究一下它们提供的功能。正是这样。

出于安全原因，您无法在本地文件系统上轻松获取文件内容。但是，如果您的页面位于Web服务器上，例如，这将起作用：

function file_get_contents(url){
   try{
      var x = new XMLHttpRequest();
      x.open('get', url, true);
      x.send(null);
      if(x.status != 200){// return nothing if the status code is not 200 OK, e.g. the page is not found
         return '';
      }
      return x.responseText;
   }
   catch(e){// failed to retrieve contents
      return '';
   }
}
var foo = file_get_contents('file.html');
document.getElementById('preview').innerHTML = foo;

---

<>你应该考虑使用iFrAME来完成GET。然后，您可以使用JavaScript获取iframe的内容。如果您正确定位iframe，那么您可能根本不需要JavaScript

这是一个带有iframe的函数，没有JS库，没有ajax

function getFile(src, target){
    var ifr = document.createElement('IFRAME');
    ifr.onload = function(e){
        target.innerHTML = 
           (ifr.contentDocument||ifr.contentWindow.document).body.innerHTML;
        document.body.removeChild(ifr);
        ifr = null;
    };
    ifr.src = src;
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
}

使用它：

getFile('file.html', document.getElementById('preview'));

---

如果需要，您可以获取页面的其他元素，而不是body标记。

有人说，jQuery总有一天会治愈癌症：当然，出于页面重量的考虑，我不想加载jQuery。我不喜欢这种获取文件内容的方法。这需要更多的时间，因为任何附加的资源都必须下载和加载。缓存可能会被使用，但你不能依赖于它。请看我对Mikes answer的评论。这只在页面有非常基本的设置且没有脚本的情况下才有效。使用.innerHTML，file.html中的任何脚本都不会在当前页面上进行计算。它在我们的web应用程序中运行良好。正如我所说，除了body标签之外，其他元素也可以从页面中加载。事实上，我们以这种方式加载HTML、CSS和JS。而且很快。