Как загрузить HTML (с javascript в нем) контент, используя ajax и pure javascript - PullRequest
Новая
       7

Как загрузить HTML (с javascript в нем) контент, используя ajax и pure javascript

1 голос
/ 27 марта 2020

Я работал над проектом, который использует концепцию «одностраничного приложения»: все страницы загружаются с использованием jQuery и ajax, что-то вроде этого: 

$.ajax({
    url : some_url
    ,data: some_data
    ,success : function(resp){
        $("#somediv").html( resp.view ) 
    }  
});

И вот так Работает нормально. Все HTML, CSS и JS, включенные в "resp.view", ведут себя как очарование.

Но однажды мне нужно было сделать это без jQuery: 

var xhr = new XMLHttpRequest();
xhr.open("POST",  someurl);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);

        somediv.innerHTML = data.view;

    }
};

xhr.send(some_data);

Чистый способ JS прекрасно работает для загрузки только HTML и CSS include в «data.view» ... но он не выполняет никаких javascript, включенных в возвращенный HTML. ..

Я мог бы использовать document.head.append, чтобы добавить все нужные мне скрипты, но в html есть некоторый код JS ... и я отвечаю на множество разных страниц в качестве ответа ... так что нельзя добавлять зависимости вручную.

Итак:

Как вставить строку, содержащую страницу HTML со стилями и сценариями, в мою текущую страницу и заставить ее вести себя как html страница? как jQuery делает это?

.... Область действия

Сейчас я работаю над сценарием, который внедряет некоторые html коды в веб-сайт моего клиента. И в тот момент, когда я вызываю свой скрипт и вызываю ajax для запроса страницы, я не могу быть уверен, загружен ли jQuery в DOM. Вот почему в этом случае мне нужен чистый JS. Затем возвращенный HTML имеет источник jQuery и другие.

Обходной путь, который я нашел для решения этой проблемы, состоял в том, чтобы заранее загрузить мой локальный jQuery источник в DOM, а затем использовать jQuery ajax, чтобы выполнить работу как всегда. это работает, но мне стало любопытно, как это так!

...