blocks|key|985586|text|这看起来像是动态脚本加载的一个很好的概述：http://unixpapa.com/js/dyna.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|985587|entityMap|0|LINK|mutability|MUTABLE|url|http://unixpapa.com/js/dyna.html^0|L|W|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>This looks like a decent overview of dynamic script loading:
<a href="http://unixpapa.com/js/dyna.html" rel="nofollow noreferrer">http://unixpapa.com/js/dyna.html</a></p>


blocks|key|985645|text|这并不美观，但它是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|985646|<script+type="text/javascript">
++document.write('<script+type="text/javascript"+src="other.js"></script>');
</script>

<script+type="text/javascript">
++functionFromOther();
</script>|code-block|syntax|javascript|985647|或|985648|<script+type="text/javascript">
++document.write('<script+type="text/javascript"+src="other.js"></script>');
++window.onload+=+function()+{
++++functionFromOther();
++};
</script>|985649|脚本必须包含在单独的<script>标记中或window.onload()之前。|offset|length|style|CODE|985650|这将不起作用：|985651|<script+type="text/javascript">
++document.write('<script+type="text/javascript"+src="other.js"></script>');
++functionFromOther();+//+Error
</script>|985652|创建节点也可以这样做，就像Pointy所做的那样，但只在FF中。您不能保证脚本何时可以在其他浏览器中使用。|985653|作为一名XML纯粹主义者，我真的很讨厌这样。但它确实是可以预测的。您可以轻松地包装那些丑陋的document.write()，这样您就不必查看它们了。您甚至可以执行测试并创建一个节点，然后将其附加到document.write()上。|985654|entityMap^0|0|0|0|0|A|8|M|F|0|0|0|0|1A|G|2R|G|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]|$M|17|N|18|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1C|8|@$M|1D|N|1E|O|P]|$M|1F|N|1G|O|P]]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|Z|$]]

<p>This isn't pretty, but it works:</p>

<pre><code>&lt;script type="text/javascript"&gt;
  document.write('&lt;script type="text/javascript" src="other.js"&gt;&lt;/script&gt;');
&lt;/script&gt;

&lt;script type="text/javascript"&gt;
  functionFromOther();
&lt;/script&gt;
</code></pre>

<p>Or</p>

<pre><code>&lt;script type="text/javascript"&gt;
  document.write('&lt;script type="text/javascript" src="other.js"&gt;&lt;/script&gt;');
  window.onload = function() {
    functionFromOther();
  };
&lt;/script&gt;
</code></pre>

<p>The script must be included either in a separate <code>&lt;script&gt;</code> tag or before <code>window.onload()</code>.</p>

<p>This will not work:</p>

<pre><code>&lt;script type="text/javascript"&gt;
  document.write('&lt;script type="text/javascript" src="other.js"&gt;&lt;/script&gt;');
  functionFromOther(); // Error
&lt;/script&gt;
</code></pre>

<p>The same can be done with creating a node, as Pointy did, but only in FF. You have no guarantee when the script will be ready in other browsers.</p>

<p>Being an XML Purist I really hate this. But it does work predictably. You could easily wrap those ugly <code>document.write()</code>s so you don't have to look at them. You could even do tests and create a node and append it then fall back on <code>document.write()</code>.</p>


blocks|key|985721|text|具有讽刺意味的是，我有你想要的东西，但想要更接近你的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|985722|我正在动态地和异步地加载东西，但是使用如下的load回调(使用dojo和xmlhtpprequest)|offset|length|style|CODE|985723|++dojo.xhrGet({
++++url:+'getCode.php',
++++handleAs:+"javascript",
++++content+:+{
++++module+:+'my.js'
++},
++load:+function()+{
++++myFunc1('blarg');
++},
++error:+function(errorMessage)+{
++++console.error(errorMessage);
++}
});|code-block|syntax|javascript|985724|有关更详细的说明，请参阅here|985725|问题是代码会被求值，如果您的代码有任何错误，console.error(errorMessage);语句将指示eval()所在的行，而不是实际的错误。这是一个如此大的问题，以至于我实际上正在尝试将其转换回<script>语句(参见here。|985726|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/7265371/how-to-properly-generate-exceptions-in-php-dojo-when-returning-javascript-code|1|https://stackoverflow.com/questions/7870723/synchronous-script-statements^0|0|M|4|0|0|C|4|0|0|M|S|1J|6|2U|8|37|4|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|O|3|P|5|6|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]]|9|@$D|1G|E|1H|1|1I]]|A|$]]|$1|Q|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<p>Ironically, I have what you want, but want something closer to what you had.</p>

<p>I am loading things in dynamically and asynchronously, but with an <code>load</code> callback like so (using dojo and xmlhtpprequest)</p>

<pre><code>  dojo.xhrGet({
    url: 'getCode.php',
    handleAs: "javascript",
    content : {
    module : 'my.js'
  },
  load: function() {
    myFunc1('blarg');
  },
  error: function(errorMessage) {
    console.error(errorMessage);
  }
});
</code></pre>

<p>For a more detailed explanation, see <a href="https://stackoverflow.com/questions/7265371/how-to-properly-generate-exceptions-in-php-dojo-when-returning-javascript-code">here</a></p>

<p>The problem is that somewhere along the line the code gets evaled, and if there's anything wrong with your code, the <code>console.error(errorMessage);</code> statement will indicate the line where <code>eval()</code> is, not the actual error. This is SUCH a big problem that I am actually trying to convert back to <code>&lt;script&gt;</code> statements (see <a href="https://stackoverflow.com/questions/7870723/synchronous-script-statements">here</a>. </p>


blocks|key|985788|text|这已经很晚了，但是如果想要对任何想要这样做的人进行参考，您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|985789|function+require(file,callback){
++++var+head=document.getElementsByTagName("head")[0];
++++var+script=document.createElement('script');
++++script.src=file;
++++script.type='text/javascript';
++++//real+browsers
++++script.onload=callback;
++++//Internet+explorer
++++script.onreadystatechange+=+function()+{
++++++++if+(this.readyState+==+'complete')+{
++++++++++++callback();
++++++++}
++++}
++++head.appendChild(script);
}|code-block|syntax|javascript|985790|前段时间我写了一篇关于它的简短的博客文章http://crlog.info/2011/10/06/dynamically-requireinclude-a-javascript-file-into-a-page-and-be-notified-when-its-loaded/|offset|length|985791|entityMap|0|LINK|mutability|MUTABLE|url|http://crlog.info/2011/10/06/dynamically-requireinclude-a-javascript-file-into-a-page-and-be-notified-when-its-loaded/^0|0|0|K|3A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>This is way late but for future reference to anyone who'd like to do this, you can use the following:</p>

<pre><code>function require(file,callback){
    var head=document.getElementsByTagName("head")[0];
    var script=document.createElement('script');
    script.src=file;
    script.type='text/javascript';
    //real browsers
    script.onload=callback;
    //Internet explorer
    script.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            callback();
        }
    }
    head.appendChild(script);
}
</code></pre>

<p>I did a short blog post on it some time ago <a href="http://crlog.info/2011/10/06/dynamically-requireinclude-a-javascript-file-into-a-page-and-be-notified-when-its-loaded/">http://crlog.info/2011/10/06/dynamically-requireinclude-a-javascript-file-into-a-page-and-be-notified-when-its-loaded/</a></p>


blocks|key|985839|text|上面的答案给我指明了正确的方向。这是我工作的一个通用版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|985840|++var+script+=+document.createElement('script');
++script.src+=+'http://'+%2B+location.hostname+%2B+'/module';
++script.addEventListener('load',+postLoadFunction);
++document.head.appendChild(script);

++function+postLoadFunction()+{
+++++//+add+module+dependent+code+here
++}++++++|code-block|syntax|javascript|985841|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>The answers above pointed me in the right direction.  Here is a generic version of what I got working:</p>

<pre><code>  var script = document.createElement('script');
  script.src = 'http://' + location.hostname + '/module';
  script.addEventListener('load', postLoadFunction);
  document.head.appendChild(script);

  function postLoadFunction() {
     // add module dependent code here
  }      
</code></pre>


blocks|key|1200333|text|function+include(file){
return+new+Promise(function(resolve,+reject){
++++++++var+script+=+document.createElement('script');
++++++++script.src+=+file;
++++++++script.type+='text/javascript';
++++++++script.defer+=+true;
++++++++document.getElementsByTagName('head').item(0).appendChild(script);

++++++++script.onload+=+function(){
++++++++resolve()
++++++++}
++++++++script.onerror+=+function(){
++++++++++reject()
++++++++}
++++++})

+/*I+HAVE+MODIFIED+THIS+TO++BE+PROMISE-BASED+
+++HOW+TO+USE+THIS+FUNCTION+

++include('js/somefile.js').then(function(){
++console.log('loaded');
++},function(){
++console.log('not+loaded');
++})
++*/
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1200334|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>function include(file){
return new Promise(function(resolve, reject){
        var script = document.createElement('script');
        script.src = file;
        script.type ='text/javascript';
        script.defer = true;
        document.getElementsByTagName('head').item(0).appendChild(script);

        script.onload = function(){
        resolve()
        }
        script.onerror = function(){
          reject()
        }
      })

 /*I HAVE MODIFIED THIS TO  BE PROMISE-BASED 
   HOW TO USE THIS FUNCTION 

  include('js/somefile.js').then(function(){
  console.log('loaded');
  },function(){
  console.log('not loaded');
  })
  */
}
</code></pre>


blocks|key|985880|text|//+...

await+import_script('https://cdnjs.cloudflare.com/ajax/libs/...js');

async+function+import_script(url)+{

++++++++const+script+=+document.createElement('script');
++++++++script.type+=+'text/javascript';
++++++++script.src+=+url;


++++++++document.head.appendChild(script);

++++++++console.log(`import+${url}+...`);

++++++++await+new+Promise((resolve)+=>+script.onload+=+resolve);
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|985881|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 class="lang-js prettyprint-override"><code>
// ...

await import_script('https://cdnjs.cloudflare.com/ajax/libs/...js');

async function import_script(url) {

        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;


        document.head.appendChild(script);

        console.log(`import ${url} ...`);

        await new Promise((resolve) =&gt; script.onload = resolve);
    }
</code></pre>


<p>Is it possible to call in a <code>.js</code> file synchronously and then use it immediately afterward?</p>

<pre><code>&lt;script type="text/javascript"&gt;
    var head = document.getElementsByTagName('head').item(0);
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'http://mysite/my.js');
    head.appendChild(script);

    myFunction(); // Fails because it hasn't loaded from my.js yet.

    window.onload = function() {
        // Works most of the time but not all of the time.
        // Especially if my.js injects another script that contains myFunction().
        myFunction();
    };
&lt;/script&gt;
</code></pre>

<p>This is simplified. In my implementation the createElement stuff is in a function. I thought about adding something to the function that could check to see if a certain variable was instantiated before returning control. But then there is still the problem of what to do when including js from another site that I have no control over.</p>

<p>Thoughts?</p>

<p>Edit:</p>

<p>I've accepted the best answer for now because it gives a good explanation for what's going on. But if anyone has any suggestions for how to improve this I'm open to them. Here's an example of what I'd like to do.</p>

<pre><code>// Include() is a custom function to import js.
Include('my1.js');
Include('my2.js');

myFunc1('blarg');
myFunc2('bleet');
</code></pre>

<p>I just want to keep from having to know the internals too much and just be able to say, "I wish to use this module, and now I will use some code from it."</p>


document.createElement("script") synchronously

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

是否可以同步调用.js文件，然后立即使用它？<script type="text/javascript">    var head = document.getElementsByTagName('head').item(0);    var script = document.createElement('scrip...

问Document.createElement(“脚本”)同步
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Document.createElement(“脚本”)同步EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Document.createElement(“脚本”)同步
EN