Браузер загружает ресурсы дважды после динамически добавленного базового HTML-тега

Для обработки относительных путей на сайте я использую <base> тег добавлен в <head> каждой страницы. Все ресурсы, загруженные через относительный путь в документах, правильно извлекаются и отображаются, однако браузер (Chrome и Firefox в моих испытаниях) загружает каждый ресурс дважды, один раз с реальным относительным путем (с ошибкой 404) и второй раз с <base> тег добавлен перед ним.

Я реализую такой тег с помощью этого сценария, написанного вручную в каждом HTML-файле:

<head>
    <script>
        /* Where am I? */
        here = window.location.href;
        hereIndex = here.indexOf('prd-ita'); //find path to main folder

        /* make substring from local root till prd-ita/ */
        newPathname = here.substring(0, hereIndex+10); //+8 to consdier also prd-ita/


        document.write('<base id="host" href="' +  newPathname  + '"/>');
    </script>

...
</head>

Например, чтобы уточнить, моя структура папок, например:

  • PRD-ит
    • index.html
    • folder1
      • file1.html
      • pic.jpg
      • subfolder2
        • file2.html

Независимо от того, какой HTML-файл загружен, сгенерированный href для базового тега file:///D:/myWebsite/prd-ita/ и в file2.html загружаю ресурс с путем src="folder1/pic.jpg",
Из инструмента проверки я вижу, что сделаны две попытки загрузки:

  1. Неправильный путь (интерпретируется реальный относительный путь) file:///D:/myWebsite/prd-ita/folder1/subfolder2/folder1/pic.jpg
  2. Правильный путь (базовый тег добавлен) file:///D:/myWebsite/prd-ita/folder1/pic.jpg

Прежде чем вы спросите, я не буду использовать / чтобы начать мои относительные пути, потому что он интерпретируется как буква диска, где находится файл, и мне нужен полный путь к основной папке prd-ita. Я хочу использовать только код на стороне клиента (например, без php).

Источник

1 ответ

У меня была такая же проблема, и решение, которое работало для меня, было добавить defer атрибут на элементы сценария. Это может быть не идеально в зависимости от вашего приложения, хотя.

Из документов Mozilla:

Этот логический атрибут устанавливается для указания браузеру, что сценарий должен выполняться после анализа документа. Поскольку эта функция еще не была реализована во всех других основных браузерах, авторы не должны предполагать, что выполнение сценария будет фактически отложено. Атрибут defer не должен использоваться в сценариях, которые не имеют атрибута src. Начиная с Gecko 1.9.2, атрибут defer игнорируется в сценариях, которые не имеют атрибута src. Однако в Gecko 1.9.1 даже встроенные скрипты откладываются, если установлен атрибут defer.

Источник
Другие вопросы по тегам