Использование JavaScript (только без библиотек) для загрузки другой страницы в div

0

Что такое эквивалент JavaScript $('content').load('page.html'); Я пытаюсь загрузить содержимое на другой странице в мой div но я не могу найти метод для простого старого JavaScript.

Теги:

5 ответов

2
Лучший ответ

Старый старый JavaScript:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

var myRequest = new XMLHttpRequest();           //XMLHttpRequest is how you do it
myRequest.onreadystatechange = function(e){
    if(myRequest.readyState == 4 && myRequest.status == 200){
        var data = myRequest.responseText;               //returned data
        document.querySelector("div").innerHTML = data;  //not safe but whatever
    }
};
myRequest.open("get", "url here", true);
myRequest.send();

Всегда лучше делать это с помощью обычного JavaScript, прежде чем использовать эти причудливые методы jQuery one-method-takes-care-of-all-for-you.

Поделиться
  • 0
    lol at document.querySelector ('div') хороший материал, мужик
1

Ваш вопрос состоит из двух частей:

  1. Захват некоторого контента на сервере от клиента
  2. Нажатие этого содержимого в div.

Для первой части см. Этот поток для инструкций по использованию XMLHTTPRequest():

HTTP GET запрос в JavaScript?

Для второй части, как для заполнения div, это просто:

document.getElementById('content').innerHTML = 'someContent';

Обратите внимание, что вы можете очистить свой контент перед заполнением div в зависимости от источника запрашиваемой страницы, поскольку использование JS для заполнения div необработанным HTML - это вектор атаки, который хакеры могут пытаться использовать.

Поделиться
  • 0
    Спасибо за ваш ответ и напоминание о подвигах.
0

Он называется XML HTTP Request (XHR). Смотрите документы здесь.

Поделиться
0

Как вы можете видеть из исходного кода здесь, функция jQuery load() вызывает функцию ajax() для загрузки внешнего html.

Под капотом функция ajax() использует XMLHttpRequest которая позволяет извлекать файл с помощью ванильного JavaScript.

Поделиться
0

Вы пытались взглянуть на использование iframes? http://www.w3schools.com/tags/tag_iframe.asp

Поделиться
  • 0
    Я думал об этом, но в наши дни их считают плохой практикой, не так ли?
  • 1
    Это действительно зависит от того, в какой ситуации вы его используете. Не могли бы вы подробнее рассказать о том, какой тип контента вы пытаетесь загрузить? Это просто с другой страницы вашего домена? Вы заботитесь о CSS?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню