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 method。它正是如此。

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来执行get。然后，您可以使用JavaScript来获取iframe的内容。如果您正确定位iframe，那么您可能根本不需要JavaScript。

Answer 4

这是一个带iframe的函数，没有JS lib，没有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标记。

如何将文件内容分配到Javascript var

4 个答案: