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

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

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

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

Спасибо заранее, всем!

Ответ 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, сделайте это сначала, чтобы довести эти браузеры до скорости:

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

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

Ответ 2

JQuery

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

Ответ 3

2019
Использование fetch

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

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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