Выполнить скрипт из внешнего файла, загруженного из AJAX - PullRequest
Новая
       3

Выполнить скрипт из внешнего файла, загруженного из AJAX

0 голосов
/ 17 октября 2018

Это очень распространенный вопрос, связанный с AJAX, но я не могу найти ни одного для моего случая, потому что большинство из них использовали jQuery и другие причины.Возможно, мой не эффективен / не рекомендуется, но в любом случае, здесь мы идем.

У меня есть кнопка [скажем, у нас есть ссылка на нее, названная btn].

Он слушает событие щелчка.Когда пользователь нажимает кнопку, он отправляет AJAX-запрос в файл .txt, находящийся в той же директории, в которой находится основной файл HTML / CSS / JS.Давайте назовем его test.txt.

. Теперь он изменяет innerHTML <html> (не заголовок / тело, html), а innerHTML является ответом на запрос AJAX.

test.txt содержит HTML-код.И в этом HTML-коде есть <script src="another-js-file.js">.Это не выполняется, вот в чем проблема.

Прежде чем вы кричите на меня INNERHTML НЕ ВЫПОЛНЯЕТ НИКАКИХ СКРИПТОВ Я это знаю.Я видел другие ответы, в которых говорилось о создании тега <script> внутри div, который находится внутри еще одного div, но, похоже, он не работает с внешними js-файлами, и решения действительно использовали innerHTML.

ХорошоВот эскиз: 

 btn.onclick = function(){
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function(){
    if(xhr.readyState = XMLHttpRequest.DONE){
        document.documentElement.innerHTML = this.responseText;
     }
   }
   xhr.open("GET", "./test.txt");
   xhr.send();
   }

Где test.txt содержит: 

<head>
   <title>Document</title>
   <link rel="stylesheet" href="test.css">
   <script src="another-js-file.js"></script>
</head>

<body>
  <h1>Hello World!</h1>
</body>

Нет jQuery.

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Я заметил в вашем первоначальном запросе XHR, который вы написали: 

if(xhr.readyState = XMLHttpRequest.DONE)

На самом деле это должно быть трижды ===, а не один.

Добавьте эту функцию в ваш исходный файл JS, гдевы делаете запрос XHR, 

function setInnerHtml(el, html) {
  el.innerHTML = html;
  // Get all the scripts from the new HTML
  const scripts = el.querySelectorAll('script');

  // Loop through all the scripts
  for (let i = 0; i < scripts.length; i++)
  {
    // Create a new script
    const s = document.createElement('script');

    // Go through all the attributes on the script
    for (let j = 0; j < scripts[i].attributes.length; j++) {
      const a = scripts[i].attributes[j];
      // Add each attribute to the new script
      s.setAttribute(a.name, a.value);
    }

    // Incase there is code inside the script tag
    // Example: <script>alert</script>
    s.innerHTML = scripts[i].innerHTML;

    // Append the new script to the head (you could change this to the end of the body as well)
    document.head.appendChild(s);
  }
}

Затем, когда вы идете, чтобы установить innerHTML корневого объекта документа, используйте вместо этого вышеуказанную функцию. 

if(xhr.readyState === XMLHttpRequest.DONE){
    setInnerHtml(document.documentElement, this.responseText);
}
0 голосов
/ 17 октября 2018

Я обнаружил, что, создав элемент script и установив его источник в «another-file.js», работал следующим образом: 

var script = document.createElement("script");
script.src = "test.js";
document.body.appendChild(script);
THIS GOES AFTER document.documentElement.innerHTML = this.responseText;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...