Почему в верстке, загруженной по XMLHttpRequest GET не работают скрипты?

Question

[Mesuti]

Привет!
Решил попробовать технику подгрузки контента без смены URL адреса.
Почему подгружаемый script не отрабатывает?

При клике на пункты меню, контент загружается с помощью XMLHttpRequest с помощью GET запросов

xhr.open('GET', page.html, false);
//...
content.innerHTML = xhr.responseText;

Код page.html

<p>Lorem</p>
<script>alert('test')</script>

Верстка у page.html вся загружается в место для контента.
Но почему не работают скрипты с теге script?

p.s.
На соседнем ресурсе говорят, что нужно заново инициализировать скрипты, потому что после подгрузки они становятся простой строкой.

Answer 1

[Stalker_RED]

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Хотя это может выглядеть как атака cross-site scripting, результат безопасный. HTML5 указывает на тег <script> вставленный через InnerHTM должен не выполнится.

https://developer.mozilla.org/ru/docs/Web/API/Elem...

Comments

[Mesuti]

На соседнем ресурсе говорят, что нужно заново инициализировать скрипты, потому что после подгрузки они становятся простой строкой.

Случайно, не знаете, как заново провести инициализацию скриптов на странице?

[Andrew]

Mesuti, https://stackoverflow.com/questions/3248384/docume...

Answer 2

[Михаил]

function evalScripts(el) {
    var $scripts = el.querySelectorAll('script');
    for (var i = 0; i < $scripts.length; i++) {
        var $script = $scripts[i];
        var s = document.createElement('script');
        s.type = 'text/javascript';
        if ($script.src) {
            s.src = $script.src;
        } else {
            s.textContent = $script.innerText;
        }
        el.appendChild(s); // можно вставить в head
    }
};

Comments

[Mesuti]

Функция берет все теги со страницы и вставляет их заново?
Это будет реинициализация скриптов?
Пока пытаюсь все оформить на страницу..

[Михаил]

Mesuti, Функция принимает на вход элемент в котором находит все скрипты и пересоздает их. Так что лучше передавайте элемент, в который вы вставили контент через innerHTML

content.innerHTML = xhr.responseText;
evalScripts(content);

[Mesuti]

Михаил, спасибо за разъяснение!