blocks|key|1872135|text|相当安全。历史上，<script>标记是完全阻塞的，因此第二个<script>标记在前者已经完成解析/执行之前是不会遇到的。唯一的问题可能是“现代”浏览器倾向于异步和延迟加载脚本。因此，要确保订单是正确的，请按如下方式使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1872136|<p>Loading+jQuery</p>
<script+type='text/javascript'+async=false+defer=false+src='scripts/jquery/core/jquery-1.4.4.js'></script>
<p>Using+jQuery</p>
<script+type='text/javascript'>
++++$.ajax({
++++++++...
++++});
</script>|code-block|syntax|javascript|1872137|但是，使用动态脚本标记插入而不是将其作为HTML字符串推入DOM可能是一个更好的主意。会是同样的故事|1872138|var+scr++=+document.createElement('script'),
++++head+=+document.head+%7C%7C+document.getElementsByTagName('head')[0];
++++scr.src+=+'scripts/jquery/core/jquery-1.4.4.js';
++++scr.async+=+false;+//+optionally

head.insertBefore(scr,+head.firstChild);|1872139|entityMap^0|9|8|V|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>It is pretty safe. Historically, <code>&lt;script&gt;</code> tags are full blocking, hence the second <code>&lt;script&gt;</code> tag can't get encountered befored the former has finished parsing/excuting. Only problem might be that "modern" browsers tend to load scripts asynchronously and deferred. So to make sure order is correct, use it like this:</p>

<pre><code>&lt;p&gt;Loading jQuery&lt;/p&gt;
&lt;script type='text/javascript' async=false defer=false src='scripts/jquery/core/jquery-1.4.4.js'&gt;&lt;/script&gt;
&lt;p&gt;Using jQuery&lt;/p&gt;
&lt;script type='text/javascript'&gt;
    $.ajax({
        ...
    });
&lt;/script&gt;
</code></pre>

<p>However, it's probably a better idea it use dynamic script tag insertion instead of pushing this as HTML string into the DOM. Would be the same story</p>

<pre><code>var scr  = document.createElement('script'),
    head = document.head || document.getElementsByTagName('head')[0];
    scr.src = 'scripts/jquery/core/jquery-1.4.4.js';
    scr.async = false; // optionally

head.insertBefore(scr, head.firstChild);
</code></pre>


blocks|key|45065|text|$.ajax和$.load是同一回事。你可以任意使用。如果将$.load放在页面上的脚本标记中，它将在加载时触发，就像$.ajax()一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|45066|当涉及到在你做某事之前等待脚本启动的时候，Tomalak说的是正确的。异常是异步调用。Javascript将发出AJAX调用，然后继续运行脚本，当AJAX调用响应时，它将运行成功/失败，这取决于您告诉它要做什么。|45067|现在假设您希望您的JS等待返回，使用一个调用非常简单--只需包装成功回调中的所有内容，或者您可以用很酷的方式使用$.deferred。这允许您进行一系列ajax调用或一个调用，然后只在完成之后运行一些代码。|45068|对于这种情况，$.when+&+$.then可能是最好的。|45069|你所做的一切都是安全的。|45070|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>$.ajax and $.load are the same thing. You can use either.  If you put $.load in a script tag on the page it will fire when it loads just like $.ajax().</p>

<p>When it comes to waiting for a script to fire before you do something what Tomalak said is kinda true.  The exception is asynchronous calls. Javascript will make an AJAX call then continue running the script and when the AJAX call responds it will run the success/fail depending on what you tell it to do.</p>

<p>Now say you want your JS to wait for the return, with a single call it's pretty easy just wrap every thing in the success callback, or you could do it the cool way and use $.deferred. This allows you to make a bunch of ajax calls or one and then run some code only after the finish.</p>

<p>$.when &amp; $.then are probably the best for this situation.</p>

<p>Any way what your are doing is safe.</p>


blocks|key|45085|text|jQuery+1.6中也有新的特性。它被称为jQuery.holdReady()。这实际上是不言自明的；当您调用jQuery.holdReady(true)时，在调用jQuery.holdReady(false)之前不会触发ready事件。将此设置为false不会自动触发就绪事件，它只会移除保持。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|45086|下面是一个加载从文档中获取的脚本的非阻塞示例：|45087|$.holdReady(true);
$.getScript("myplugin.js",+function()+{
+++++$.holdReady(false);
});|code-block|syntax|javascript|45088|有关更多信息，请参见http://api.jquery.com/jQuery.holdReady/|45089|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.holdReady/^0|0|A|M|I|1K|M|2B|N|34|5|0|0|0|A|13|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|O|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>There is also new feature in <code>jQuery 1.6</code>. It is called <code>jQuery.holdReady()</code>. It is actually self explanatory; when you call <code>jQuery.holdReady(true)</code>, <code>ready</code> event is not fired until you call <code>jQuery.holdReady(false)</code>. Setting this to false will not automatically fire a ready event, it just removes the hold.</p>

<p>Here is a non-blocking example of loading a script taken from the documentation:</p>

<pre><code>$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});
</code></pre>

<p>See <a href="http://api.jquery.com/jQuery.holdReady/">http://api.jquery.com/jQuery.holdReady/</a> for more information</p>


blocks|key|1872183|text|向脚本文件中添加一个ID，以便您可以查询它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1872184|<script+id="hljs"+async+src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>|code-block|syntax|javascript|1872185|然后在JavaScript中向它添加一个负载侦听器|1872186|<script>
++var+script+=+document.querySelector('#hljs');
++script.addEventListener('load',+function()+{
++++hljs.initHighlightingOnLoad();+
++});
</script>|1872187|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Add an ID to your script file so you can query it.</p>

<pre><code>&lt;script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>Then add a load listener to it in JavaScript</p>

<pre><code>&lt;script&gt;
  var script = document.querySelector('#hljs');
  script.addEventListener('load', function() {
    hljs.initHighlightingOnLoad(); 
  });
&lt;/script&gt;
</code></pre>


blocks|key|10669|text|等待多个脚本加载|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|10670|以下帮助程序只加载多个脚本一次，并返回承诺：|10671|async+function+cirosantilli_load_scripts(script_urls)+{
++++function+load(script_url)+{
++++++++return+new+Promise(function(resolve,+reject)+{
++++++++++++if+(cirosantilli_load_scripts.loaded.has(script_url))+{
++++++++++++++++resolve();
++++++++++++}+else+{
++++++++++++++++var+script+=+document.createElement('script');
++++++++++++++++script.onload+=+resolve;
++++++++++++++++script.src+=+script_url
++++++++++++++++document.head.appendChild(script);
++++++++++++}
++++++++});
++++}
++++var+promises+=+[];
++++for+(const+script_url+of+script_urls)+{
++++++++promises.push(load(script_url));
++++}
++++await+Promise.all(promises);
++++for+(const+script_url+of+script_urls)+{
++++++++cirosantilli_load_scripts.loaded.add(script_url);
++++}
}
cirosantilli_load_scripts.loaded+=+new+Set();

(async+()+=>+{
++++await+cirosantilli_load_scripts([
++++++++'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js',
++++++++'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js',
++++]);

++++//+Now+do+stuff+with+those+scripts.

})();|code-block|syntax|javascript|10672|上游GitHub：定义和用法。|10673|在铬75中测试。|10674|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/cirosantilli/cirosantilli.github.io/blob/c926acd68d6c17292491ce1af1c19e0c7635055f/docinfo.html#L14|1|https://github.com/cirosantilli/cirosantilli.github.io/blame/c926acd68d6c17292491ce1af1c19e0c7635055f/README.adoc#L2154^0|0|8|0|0|0|9|2|0|C|2|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]|$9|19|A|1A|1|1B]]|E|$]]|$1|O|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

<p><strong>Wait for multiple scripts to load</strong></p>
<p>The following helper loads multiple scripts only once and returns a promise:</p>
<pre><code>async function cirosantilli_load_scripts(script_urls) {
    function load(script_url) {
        return new Promise(function(resolve, reject) {
            if (cirosantilli_load_scripts.loaded.has(script_url)) {
                resolve();
            } else {
                var script = document.createElement('script');
                script.onload = resolve;
                script.src = script_url
                document.head.appendChild(script);
            }
        });
    }
    var promises = [];
    for (const script_url of script_urls) {
        promises.push(load(script_url));
    }
    await Promise.all(promises);
    for (const script_url of script_urls) {
        cirosantilli_load_scripts.loaded.add(script_url);
    }
}
cirosantilli_load_scripts.loaded = new Set();

(async () =&gt; {
    await cirosantilli_load_scripts([
        'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js',
    ]);

    // Now do stuff with those scripts.

})();
</code></pre>
<p>GitHub upstream: <a href="https://github.com/cirosantilli/cirosantilli.github.io/blob/c926acd68d6c17292491ce1af1c19e0c7635055f/docinfo.html#L14" rel="noreferrer">definition</a> and <a href="https://github.com/cirosantilli/cirosantilli.github.io/blame/c926acd68d6c17292491ce1af1c19e0c7635055f/README.adoc#L2154" rel="noreferrer">usage</a>.</p>
<p>Tested in Chromium 75.</p>


blocks|key|45132|text|const+jsScript+=+document.createElement('script')
jsScript.src+=
++'https://coolJavascript.js'

document.body.appendChild(jsScript)

jsScript.addEventListener('load',+()+=>+{
++doSomethingNow()
})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|45133|将在动态添加脚本后加载|unstyled|45134|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>const jsScript = document.createElement('script')
jsScript.src =
  'https://coolJavascript.js'

document.body.appendChild(jsScript)

jsScript.addEventListener('load', () =&gt; {
  doSomethingNow()
})
</code></pre>

<p>Will load after the script is dynamically added</p>


blocks|key|45172|text|在我的例子中，解决方案不起作用。我希望在脚本加载了链接的右键单击事件后，以编程方式单击链接。因此，我不得不处理超时和循环：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|45173|<script>
++var+ifrbutton+=+document.getElementById("id-of-link");
++if(typeof(ifrbutton)+!=+'undefined'+&&+ifrbutton+!=+null+&&+window.location.hash+==+"#special-hash")+{
++++var+i+=+0;
++++//+store+the+interval+id+to+clear+in+future
++++var+intr+=+setInterval(function()+{
++++++if+(ifrbutton.onclick!=null)+{
++++++++ifrbutton.click();
++++++++clearInterval(intr);
++++++++i+=+200;
++++++}
++++++if+(%2B%2Bi+>=+200)+clearInterval(intr);
++++},+300)
++}
</script>|code-block|syntax|javascript|45174|因此，解决方案还可以是每隔一段时间检查脚本带来的某些功能.设置一些安全的结尾以防脚本无法加载..。安全地为我工作;)|45175|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In my case the solutions didn't work. I wanted to programmatically click a link after a script has loaded the right click event for the link. Thus I had to work with timeout and loop:</p>
<pre><code>&lt;script&gt;
  var ifrbutton = document.getElementById(&quot;id-of-link&quot;);
  if(typeof(ifrbutton) != 'undefined' &amp;&amp; ifrbutton != null &amp;&amp; window.location.hash == &quot;#special-hash&quot;) {
    var i = 0;
    // store the interval id to clear in future
    var intr = setInterval(function() {
      if (ifrbutton.onclick!=null) {
        ifrbutton.click();
        clearInterval(intr);
        i = 200;
      }
      if (++i &gt;= 200) clearInterval(intr);
    }, 300)
  }
&lt;/script&gt;
</code></pre>
<p>Thus the solution could also be to check in intervals for certain functionality that the script brings with it... Set some secure end just in case the script gets never loaded... Works safely for me ;)</p>


blocks|key|1872305|text|++++new+MutationObserver((mutationsList,+observer)+=>+{
++++++++for+(var+mutation+of+mutationsList)+
++++++++++++if+(mutation.type+===+'childList')+
++++++++++++++++Array.from+(mutation.addedNodes)
++++++++++++++++++++.filter+(node+=>+node.tagName+===+'SCRIPT')
++++++++++++++++++++.forEach+(script+=>+{
++++++++++++++++++++++++//Script+started+loading
++++++++++++++++++++++++script.addEventListener+('load',+()+=>+{+
+++++++++++++++++++++++++++++//Script+finished+loading
++++++++++++++++++++++++})
++++++++++++++++++++})
++++}).observe(document,+{+attributes:+false,+childList:+true,+subtree:+true+});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1872306|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>    new MutationObserver((mutationsList, observer) =&gt; {
        for (var mutation of mutationsList) 
            if (mutation.type === 'childList') 
                Array.from (mutation.addedNodes)
                    .filter (node =&gt; node.tagName === 'SCRIPT')
                    .forEach (script =&gt; {
                        //Script started loading
                        script.addEventListener ('load', () =&gt; { 
                             //Script finished loading
                        })
                    })
    }).observe(document, { attributes: false, childList: true, subtree: true });
</code></pre>


blocks|key|45192|text|这个对我有用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|45193|function+loadScript(sources,+callBack)+{
++++var+script++++++=+document.createElement('script');
++++script.src++++++=+sources;
++++script.async++++=+false;+
++++document.body.appendChild(script);+
++++
++++script.addEventListener('load',+()+=>+{
++++++++if(typeof+callBack+==+"function")+callBack(sources);
++++});
}|code-block|syntax|javascript|45194|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>this works for me</p>
<pre><code>function loadScript(sources, callBack) {
    var script      = document.createElement('script');
    script.src      = sources;
    script.async    = false; 
    document.body.appendChild(script); 
    
    script.addEventListener('load', () =&gt; {
        if(typeof callBack == &quot;function&quot;) callBack(sources);
    });
}
</code></pre>


<p>In my page body, I need to insert this code as the result of an AJAX call:</p>

<pre><code>    &lt;p&gt;Loading jQuery&lt;/p&gt;
    &lt;script type='text/javascript' src='scripts/jquery/core/jquery-1.4.4.js'&gt;&lt;/script&gt;
    &lt;p&gt;Using jQuery&lt;/p&gt;
    &lt;script type='text/javascript'&gt;
        $.ajax({
            ...
        });
    &lt;/script&gt;
</code></pre>

<p>I can't use <code>$.load()</code> since the document has already loaded, so the event doesn't fire.</p>

<p>Is this safe? If not, how do I make sure the jquery script has loaded before my custom, generated code is executed.</p>


Waiting for dynamically loaded script

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在我的页面正文中，我需要插入以下代码，这是AJAX调用的结果：    <p>Loading jQuery</p>    <script type='text/javascript' src='scripts/jquery/core/jquery-1.4.4.js'></script>    <p>Using jQuer...

问等待动态加载脚本
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问等待动态加载脚本EN