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

Question

好的，这很简单，但是我有点需要菜鸟的帮助。

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

使用HtmlHTTPRequest可以轻松完成此操作，但是，我不确定应该使用的确切代码是什么。

这是我想要实现的目标：

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

会很高兴给您带来启发的:)

Answer 1

虽然我不确定您是否正在使用jQuery（似乎您不是在使用直接xhr），但值得研究一下它们提供的load ajax方法 。 它确实做到了。

Answer 2

出于安全原因，您无法轻松地获取本地文件系统上文件的内容。 但是，如果您的页面位于网络服务器上（例如http://example.com/ ），则可以使用：

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;

Answer 3

您应该考虑使用iframe进行获取。 然后，您可以使用JavaScript获取iframe的内容。 如果正确放置iframe，则可能根本不需要JavaScript。

Answer 4

这是一个具有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标签之外的页面其他元素。