使用HTML注入时使用CDN或外部域的内联脚本后执行脚本文件 [英] Script File Executing After Inline Script With CDN or External Domain On HTML injection

问题描述

我在将HTML注入到已经加载的DOM中时遇到了问题，在下载脚本文件后，该Java加载了嵌入式JavaScript。据我所知，这不应该是异步的，并且内联脚本应该在脚本文件之后执行。如果域名与调用页面相同，但是使用CDN或什至子域也可以做到这一点，则此方法有效。我应该做些什么来重新定义这些称呼吗？我发誓，在我使用CDN一周以上之前，这个方法就奏效了，但是也许我从未发现过这个问题。

I am having an issue with HTML injection into an already loaded DOM where the inline javascript is being loaded after the script file is downloaded. From what I know this should not be async and the inline script should execute after the script file. This works if the domain name is the same as the calling page, but using a CDN or even a subdomain does the same thing. Is there something I should do to rework how I am calling these? I swear this worked before as I had the CDN on for over a week but maybe I never caught this issue.

控制台

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');

推荐答案

一种方法是使用 jquery的getScript（）函数。

One way is to use jquery's getScript() function.

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

But preferably, you may use native javascript to load the script file and then run the inline script.

也许我不太清楚这个问题。

Maybe i have not understood the question clearly.

编辑：
这是来自 HTML5 有关脚本元素的规范。

This is a quote from the HTML5 spec regarding script elements.

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

让src为元素的src属性的值。

Let src be the value of the element's src attribute.

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

解析相对于元素的src。

Resolve src relative to the element.

如果上一步失败，则将要执行的任务排队一个简单的名为
的事件，在元素处发生错误，然后中止这些步骤。

执行可能启用CORS的t提取得到的绝对URL，
，其模式为元素的跨域
内容属性的当前状态，origin为脚本元素的
Document的起源，并且默认的origin行为设置为taint

Do a potentially CORS-enabled fetch of the resulting absolute URL, with the mode being the current state of the element's crossorigin content attribute, the origin being the origin of the script element's Document, and the default origin behaviour set to taint.

以这种方式获得的资源可以是CORS同源
或CORS交叉起源。

The resource obtained in this fashion can be either CORS-same-origin or CORS-cross-origin. This only affects how error reporting happens.

出于性能方面的考虑，用户代理可能会在src属性被设置后立即开始获取脚本（如上面定义的
）。而是将
设置为希望将元素插入文档中（并且
crossorigin属性在此期间不会更改值）。无论哪种方式，
都将元素插入到文档中后，加载操作必须按照此步骤中的描述启动
。如果UA执行这样的
预取，但是元素从未插入文档中，或者
src属性是动态更改的，或者crossorigin属性是
动态更改的，则用户代理将而不执行这样获得的脚本
，并且提取过程实际上会浪费
。

For performance reasons, user agents may start fetching the script (as defined above) as soon as the src attribute is set, instead, in the hope that the element will be inserted into the document (and that the crossorigin attribute won't change value in the meantime). Either way, once the element is inserted into the document, the load must have started as described in this step. If the UA performs such prefetching, but the element is never inserted in the document, or the src attribute is dynamically changed, or the crossorigin attribute is dynamically changed, then the user agent will not execute the script so obtained, and the fetching process will have been effectively wasted.

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

Then, the first of the following options that describes the situation must be followed:

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

联网任务源将其放置在任务上的任务
次排队提取算法已完成，必须设置元素的已准备好由解析器执行的
标志。解析器将处理执行脚本。

The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

如果该元素具有src属性，并且该元素已被标记为
为 parser-inserted ，并且该元素没有async属性
元素是
的文档的未决解析阻止脚本，该脚本是创建该元素的解析器。 （每个文档一次只能有一个这样的
脚本。）

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

The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

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

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

Set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

如果元素具有src属性，则没有async属性，
和没有设置 force-async标志。必须将元素
添加到将要执行的脚本列表的末尾，以便尽快与脚本元素的Document相关联的
。
开始编写脚本算法的时间。

一旦
出现，网络任务源将其放置在任务队列上的任务提取算法已完成，必须运行以下步骤：

The task that the networking task source places on the task queue once the fetching algorithm has completed must run the following steps:

如果该元素现在不是脚本列表
中将按顺序执行的第一个元素尽可能在上面添加
，然后将元素标记为就绪，但是在
还不执行脚本的情况下终止这些步骤。

If the element is not now the first element in the list of scripts that will execute in order as soon as possible to which it was added above, then mark the element as ready but abort these steps without executing the script yet.

执行：执行与该l中第一个脚本
元素相对应的脚本块可能会尽快执行
的脚本。

Execution: Execute the script block corresponding to the first script element in this list of scripts that will execute in order as soon as possible.

从此脚本列表中删除将按顺序执行$ ​​b $ b的第一个元素

Remove the first element from this list of scripts that will execute in order as soon as possible.

如果此将尽快执行的脚本列表
仍然不为空，并且第一个条目具有已经标记为
准备就绪，然后跳回到执行标签。

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

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

The task that the networking task source places on the task queue once the fetching algorithm has completed must execute the script block and then remove the element from the set of scripts that will execute as soon as possible.

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

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

From this I think that your "external" file is loaded after the inline script block. I would therefore use the "getScript()" function from jquery to make sure that the script is loaded before the inline script block.

这篇关于使用HTML注入时使用CDN或外部域的内联脚本后执行脚本文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！