Загрузить содержимое HTML-файла в Div [без использования фреймов]

Question

Я вполне уверен, что это обычный вопрос, но я довольно новичок в JS и у меня возникли некоторые проблемы с этим.

Я хотел бы загрузить x.html в div с идентификатором "y" без использования фреймов. Я попробовал несколько вещей, искал вокруг, но я не могу найти достойного решения моей проблемы.

Я бы предпочел что-то в JavaScript, если это возможно.

Заранее всем спасибо!

Answer 1

Ух ты, из всех ответов, посвященных фреймворкам, можно подумать, что это было чем-то невероятно трудным для JavaScript.Это не совсем так.

var xhr= new XMLHttpRequest();
xhr.open('GET', 'x.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return; // or whatever error handling you want
    document.getElementById('y').innerHTML= this.responseText;
};
xhr.send();

Если вам нужна совместимость с IE <8, сначала сделайте это, чтобы ускорить работу этих браузеров: </p>

if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
    window.XMLHttpRequest= function() {
        return new ActiveXObject('MSXML2.XMLHttp');
    };
}

Обратите внимание, что загрузка контента на страницуИспользование скриптов сделает этот контент невидимым для клиентов без JavaScript, таких как поисковые системы.Используйте с осторожностью и рассмотрите возможность включения на стороне сервера, если все, что вам нужно, это поместить данные в общий общий файл.

Answer 2

JQuery:

$("#y").load("x.html");

Answer 3

Я бы предложил попасть в одну из библиотек JS. Они обеспечивают совместимость, поэтому вы можете быстро начать работу. JQuery и DOJO действительно великолепны. Например, чтобы сделать то, что вы пытаетесь сделать в jQuery, он должен выглядеть примерно так:

<script type="text/javascript" language="JavaScript">
$.ajax({
    url: "x.html", 
    context: document.body,
    success: function(response) {
        $("#yourDiv").html(response);
    }
});
</script>

Answer 4

2019 При использовании fetch

<script>
fetch('page.html')
  .then(data => data.text())
  .then(html => document.getElementById('elementID').innerHTML = html);
</script>

<div id='elementID'> </div>

необходимо получить ссылку http или https, это означает, что она не будет работать локально.

Answer 5

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

Answer 6

http://www.boutell.com/newfaq/creating/include.html

это объяснило бы, как написать свою собственную клиентскую сторону, но jQuery - это много, намного более простой вариант ... плюс вы все равно получите намного больше, используя jQuery