使用CDN或外部域在内联脚本上执行脚本文件在HTML注入时

Question

我有一个HTML注入到已加载的DOM的问题,其中在下载脚本文件后加载内联javascript.据我所知,这不应该是异步的,并且内联脚本应该在脚本文件之后执行.如果域名与调用页面相同,则此方法有效,但使用CDN甚至子域也可以执行相同的操作.我是否应该做些什么来改变我如何称呼这些？我发誓这是有效的,因为我有一个多星期的CDN,但也许我从未发现过这个问题.

安慰

Loading Inline Script
VM1400:3 Uncaught TypeError: Cannot read property 'init' of undefined(anonymous function) 
app.members.event.js?v=204&_=1453644424985:5 Loading Script File
app.members.event.js?v=204&_=1453644424985:71 Finished Script File

使用Javascript

<script type="text/javascript" src="https://test.azureedge.net/Areas/Directors/scripts/app.members.event.js?v=204"></script>
<script type="text/javascript">
console.log('Loading Inline Script');
    app.viewModel.members.event.init();
console.log('Finished Inline Script');

Answer 1

一种方法是使用jquery 的 getScript()函数。

但最好，您可以使用本机 javascript 加载脚本文件，然后运行内联脚本。

也许我没有清楚地理解这个问题。

编辑：这是HTML5规范中有关脚本元素的引用。

如果元素具有 src 内容属性，请运行以下子步骤：

令 src 为元素 src 属性的值。

如果 src 是空字符串，则将任务排队以在元素上触发名为 error 的简单事件，并中止这些步骤。

解析相对于元素的 src。

如果上一步失败，则将任务排队以在元素上触发名为 error 的简单事件，并中止这些步骤。

对生成的绝对 URL 执行可能支持 CORS 的获取，模式是元素跨源内容属性的当前状态，源是脚本元素文档的源，默认源行为设置为污点。

这种方式获取的资源可以是CORS同源的，也可以是CORS跨源的。这仅影响错误报告的发生方式。

出于性能原因，用户代理可能会在设置 src 属性后立即开始获取脚本（如上所述），而不是希望将元素插入到文档中（并且 crossorigin 属性不会更改值）同时）。无论哪种方式，一旦将元素插入到文档中，加载就必须按照此步骤中的描述开始。如果UA执行了这样的预取，但该元素从未插入到文档中，或者src属性动态更改，或者crossorigin属性动态更改，那么用户代理将不会执行如此获得的脚本，并且提取过程将已经被有效地浪费了。

然后，必须遵循以下描述情况的第一个选项：

如果该元素具有 src 属性，并且该元素具有 defer 属性，并且该元素已被标记为“解析器插入”，并且该元素没有 async 属性，则该元素必须添加到列表的末尾当文档完成与创建该元素的解析器的文档关联的解析时将执行的脚本。

一旦获取算法完成，网络任务源放置在任务队列上的任务必须设置元素的“准备好解析器执行”标志。解析器将处理脚本的执行。

如果该元素具有 src 属性，并且该元素已被标记为“解析器插入”，并且该元素没有异步属性，则该元素是创建该元素的解析器的 Document 的待处理解析阻塞脚本。（每个文档一次只能有一个这样的脚本。）

一旦获取算法完成，网络任务源放置在任务队列上的任务必须设置元素的“准备好解析器执行”标志。解析器将处理脚本的执行。

如果该元素没有 src 属性，并且该元素已被标记为“解析器插入”，并且创建脚本的解析器是 XML 解析器，或者是脚本嵌套级别不大于 1 的 HTML 解析器，并且创建该脚本元素的 HTML 解析器或 XML 解析器的 Document 具有阻止脚本的样式表。该元素是创建该元素的解析器的 Document 的挂起解析阻止脚本。（每个文档一次只能有一个这样的脚本。）

设置元素的“准备好解析器执行”标志。解析器将处理脚本的执行。

如果该元素具有 src 属性，没有 async 属性，并且没有设置“force-async”标志，则该元素必须添加到将尽快按关联顺序执行的脚本列表的末尾开始准备脚本算法时使用脚本元素的文档。

获取算法完成后，网络任务源放入任务队列的任务必须运行以下步骤：

如果该元素现在不是将按照上面添加的顺序尽快执行的脚本列表中的第一个元素，则将该元素标记为就绪，但中止这些步骤而不执行脚本。

执行：执行此脚本列表中将尽快按顺序执行的第一个脚本元素对应的脚本块。

从将尽快按顺序执行的脚本列表中删除第一个元素。

如果将尽快按顺序执行的脚本列表仍然不为空，并且第一个条目已标记为就绪，则跳回标记为执行的步骤。

如果元素具有 src 属性，则必须将元素添加到脚本集中，该脚本集将在准备脚本算法开始时尽快执行脚本元素的文档。

一旦获取算法完成，网络任务源放置在任务队列上的任务必须执行脚本块，然后从将尽快执行的脚本集中删除该元素。

否则，即使其他脚本已经在执行，用户代理也必须立即执行该脚本块。获取外部脚本必须延迟元素文档的加载事件，直到获取资源（上面定义）后由网络任务源排队的任务运行为止。

由此我认为您的“外部”文件是在内联脚本块之后加载的。因此，我将使用 jquery 中的“getScript()”函数来确保脚本在内联脚本块之前加载。