Видимость между несколькими сценариями при динамической загрузке через Ajax

Question

У меня есть автономный файл SVG, который отображается без проблем.Он включает в себя некоторые встроенные сценарии и ссылки на 2 других сценария.Встроенный скрипт вызывает функцию инициализации в одном из других скриптов, и это работает во всех больших браузерах:

<svg ...>
<script type="application/ecmascript"><![CDATA[
...
do_init_in_foo1();
...
]]></script>
<script type="application/ecmascript" xlink:href="foo1.js"></script>
<script type="application/ecmascript" xlink:href="foo2.js"></script>
</svg>

Хорошо, вот проблема: когда я вместо этого динамически загружаю этот скрипт через Ajax, 'do_init_in_foo1«больше не видно.Он по-прежнему работает в Opera, если ссылка 'foo1.js' появляется над вызовом init, и работает в более старых версиях F / F, но в других браузерах не работает вообще, независимо от того, как я расположил скрипт 3разделы.Я получаю сообщение об ошибке: ReferenceError: do_init_in_foo1 is not defined.

Что такое динамическая загрузка Ajax, которая изменяет видимость?Есть ли способ обойти это?

Один из вариантов - переместить эту строку:

<script type="application/ecmascript" xlink:href="foo1.js"></script>

в родительский документ, поскольку она не изменяется при различных вызовах Ajax.Однако, если я это сделаю, браузер пожалуется на перемещенный тег скрипта (Namespace prefix xlink for href on script is not defined).Я думаю, что мне нужно было бы обернуть тег script в тег svg, чтобы исправить это, с атрибутом xmlns: xlink, но тогда это дало бы мне два svgs верхнего уровня, что было бы (я думаю) проблемой.

Спасибо.

Answer 1

Вы не можете полагаться на динамически загружаемый код JavaScript, потому что вы не знаете, загружен он или нет в тот момент, когда вы пытаетесь получить к нему доступ в своем коде.Наилучшим подходом здесь является вызов некоторой функции в вашем загруженном скрипте.Например, если вы загружаете foo1.js через вызов AJAX, вы можете добавить следующую функцию в конец этого файла:

function foo1Loaded(){
 do_init_in_foo1();
 //and here do whatever you need to do else with variables/functions from loaded file
}
foo1Loaded();

Если вы хотите знать, когда все внешние скрипты загружаются через вызовы AJAXвы можете считать их после загрузки (с помощью функций обратного вызова, аналогичных описанным выше).

Answer 2

Во-первых, когда вы делаете что-то асинхронно, вы должны учитывать, что скорость браузера, компьютера, сети и сервера будет проблемой.Вы не можете полагаться на динамическую загрузку кода, чтобы быть там.Что, если у вас закончится тайм-аут в сети?Динамическая загрузка кода может работать, но вы должны убедиться, что объект есть, прежде чем вызывать его.Проверка, не определена ли она, а затем выдача setTimeout, чтобы повторить попытку, будет работать.jQuery для готовых документов также очень удобен, чтобы убедиться, что все загружено.

Также помните, что файлы JS загружаются последовательно в браузере.Вот почему очень важно поместить ненужный JS внизу документа, так как вы не хотите задерживать рендеринг CSS / HTML, когда загружаете что-то, что может хорошо работать после просмотра страницы пользователем.т.е. отслеживание файлов cookie и т. д.