Как назначить содержимое файла в Javascript var

Question

хорошо, это просто, но мне нужна помощь нуба.

Я бы хотел сделать что-то простое: Чтобы назначить содержимое файла HTML для JS-переменной, а затем передать этот HTML-код в элемент страницы с помощью свойства innerHTML.

Это легко сделать с помощью HtmlHTTPRequest, однако я не уверен, какой именно код мне следует использовать.

вот чего я хотел бы достичь:

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

Был бы рад за ваше просветление :) 1010 *

Answer 1

Вот функция с 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, если необходимо.

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

Хотя я не уверен, что вы используете jQuery (не похоже, что вы используете прямой xhr), возможно, стоит изучить метод load ajax , чтобы они предоставлять. Это именно так.