Задать вопрос
@smart_alex
javascript

Как заставить работать внедрённый JavaScript?

Яваскрипты, внедрённые в тело страницы после её загрузки, не исполняются. При попытке вызвать функцию из такого скрипта пишет «функция не определена».

Есть ли способ заставить видеть внедрённый скрипт и пользоваться функциями из него для функций, загруженных обычным способом?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Test</title>

<script>
  function loadHtmlParts() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'common.htm', true);
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) {return};
      if (this.status !== 200) {return};
     
      var htm = document.createElement("html");
      htm.innerHTML = this.responseText;    
      
      document.getElementById('script-place').innerHTML = htm.getElementsByClassName("script-load")[0].innerHTML;
    };
    xhr.send();
  }
  
  function start() {
    loadHtmlParts();
    myFunk(); // Not work !!!
  }
</script>
</head>

<body onload="start();">
<div id="script-place"></div>


  <div>
    <!-- html code -->
  </div> 
  
</body>
</html>


Функция myFunk() находится в файле common.htm в составе скрипта с многими другими функциями.

Когда я вручную вставляю этот скрипт на место

<div id="script-place"></div>

всё работает, когда это вставляет загрузчик (в то же место, только автоматически), myFunk() уже не работает.

------
Вопрос не решён, я получил множество ответов и ни один не заработал так, как нужно. Видимо дело в каком-то неучитываемом мной факторе. Я попробую разобраться и, если найду решение, отпишусь здесь. Всем ответившим большое спасибо! Больше ответов добавлять не нужно.
  • Вопрос задан
  • 873 просмотра
6 комментариев
Подписаться 1 Оценить 6 комментариев
Пригласить эксперта
Ответы на вопрос 3
Writerim
@Writerim
Заполнить позже...
https://api.jquery.com/jquery.getscript/

* Дополнение
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script>
  function getScript(url,success) {
		var head = document.getElementsByTagName("head")[0], done = false;
		var script = document.createElement("script");
		script.src = url;
		script.onload = script.onreadystatechange = function(){
		  if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") ) {
		    done = true;
		    if (typeof success === 'function') success();
		  }
		};
		head.appendChild(script);
	}
  
  function start() {
  	getScript('common.htm',function(){
  		myFunk();
  	});
  }
</script>
</head>

<body onload="start();">
<div id="script-place"></div>


  <div>
    <!-- html code -->
  </div> 
  
</body>
</html>


common.htm
function myFunk(){	
	alert(1);
}


ec48a20cb3ac46d99ad799ea1a593a56.png
Ответ написан
17 комментариев
17 комментариев
gwer
@gwer
Скрипт в отдельном файле (это вы называете загруженным обычным способом?) должен подключаться после определения функций в теле страницы или по событию типа onload. Убедитесь для начала в этом. Попробуйте вызвать определяемую функцию из консоли браузера (в инструментах разработчика).

upd: определение вызываемой функции загружается асинхронно, таким образом обращение к функции происходит до того, как она определена. Коллбэки в помощь.
Ответ написан
8 комментариев
8 комментариев
@alexeyproject
Выше верно написали myFunk() вызывается до загрузки скрипта, т.е. функция еще не определена. И вообще в коде много лишних действий. Рабочий код:
index.htm
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>

<body>
<script>

    (function loadHtmlParts() {
        'use strict';

        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'common.js', true);
        xhr.onload = function() {
            if (this.status !== 200) {return}

            var script = document.createElement("script");
            script.innerHTML = this.responseText;
            document.head.appendChild(script);


            // и вот здесь вызываем функцию после загрузки и выполнения скрипта
            myFunk();

        };
        xhr.send();

    })();

</script>

</body>
</html>


common.js
function myFunk(){
    console.log('myFunk has been called!');
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Тестирование модуля ElasticSearch через ftp
22 нояб. 2024, в 03:54
1500 руб./за проект
Телеграм бот
22 нояб. 2024, в 02:56
10000 руб./за проект
Перерисовать логотип в векторе
22 нояб. 2024, в 00:55
500 руб./за проект
Ещё заказы