document.createElement дублируется бесконечно, сам по себе

Question

Почему код добавляет в head скрипт бесконечное число раз , пока не остановить выполнение страницы? Мне один раз надо

============спустя 1 час==================== почему то когда слеш поставил перед js то все заработало loadScript('/js/script.js'); Но всё равно почему так?

файл js/sript.js

function loadScript(src){
    let script =document.createElement('script');
    script.src=src;
    document.head.append(script);

}
loadScript('js/script.js');

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Git test</title>
    
    
    </head>
    <body>
    <p>Hello world!</p>
    <p>Second message</p>
    
    <script defer src="js/script.js"></script>
    
    </body>
</html>

Answer 1

Проблема заключается в том, что функция loadScript и ее вызов находятся в загружаемом файле.

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

Для решения достаточно вынести вызов метод loadScript из загружаемого файла.

файл js/sript.js

console.log('script loaded');

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Git test</title>
    
    
    </head>
    <body>
    <p>Hello world!</p>
    <p>Second message</p>
    
    <script>
        function loadScript(src){
            let script =document.createElement('script');
            script.src=src;
            document.head.append(script);
        }
        loadScript('js/script.js');
    </script>
    
    </body>
</html>

Answer 2

У вас есть файл, в котором вы создаёте и подключаете этот же файл, из-за этого действие попадает в рекурсию.
А когда вы добавляете к подключаемому файлу путь со слешем вначале, то этот файл не загружается (404) и рекурсии нет.

¯\_(ツ)_/¯

БЛОГ НА HUSL

document.createElement дублируется бесконечно, сам по себе

Ответы (2 шт):