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'不再可见。如果'foo1.js'引用出现在init调用之上，它仍适用于Opera，并且可以在较旧版本的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）。我想我需要在svg标签中包装脚本标签来修复它，并使用xmlns：xlink属性，但这会给我两个顶级svgs，这将是（我认为）一个问题。

感谢。

Answer 1

您不能依赖动态加载的JavaScript代码，因为在您尝试在代码中访问它时，您不知道它是否已加载。这里最好的方法是在加载脚本中调用某个函数。例如，如果您通过AJAX调用加载foo1.js，则可以在此文件的末尾添加以下函数：

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渲染。即追踪饼干等。

通过Ajax动态加载时，多个脚本之间的可见性

2 个答案: