document.createElement（“script”）同步 [英] document.createElement("script") synchronously

问题描述

是否可以同步调用 .js 文件，然后立即使用？

Is it possible to call in a .js file synchronously and then use it immediately afterward?

<script type="text/javascript">
    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();
    };
</script>

这是简化的。在我的实现中，createElement的东西在一个函数中。我想到在函数中添加一些东西，可以检查某个变量是否在返回控件之前被实例化。但是，当我从无法控制的另一个网站中添加js时，仍然存在什么问题。

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.

想法？

编辑：

我现在已经接受了最好的答案，因为它给出了一个很好的解释发生了什么。但如果有任何建议如何改善这一点，我对他们开放。以下是我想要做的一个例子。

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.

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

myFunc1('blarg');
myFunc2('bleet');

我只想不必了解内部太多，只能说我想使用这个模块，现在我将使用一些代码。

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."

推荐答案

你可以创建你的< script> 元素与onload处理程序，当脚本由浏览器加载和评估时，将被调用。

You can create your <script> element with an "onload" handler, and that will be called when the script has been loaded and evaluated by the browser.

var script = document.createElement('script');
script.onload = function() {
  alert("Script loaded and ready");
};
script.src = "http://whatever.com/the/script.js";
document.getElementsByTagName('head')[0].appendChild(script);

您不能同步执行。

编辑—有人指出，真实的形式是，IE不会在< script> 正在加载/评估的标签中触发加载事件。因此，我想接下来要做的是使用XMLHttpRequest获取脚本，然后自己获取 eval（）。 （或者，我想，将文本填充到您添加的< script> 标签中;执行环境为 eval（）受本地范围的影响，所以不一定会做你想做的事情。）

edit — it's been pointed out that, true to form, IE doesn't fire a "load" event on <script> tags being loaded/evaluated. Thus I suppose the next thing to do would be to fetch the script with an XMLHttpRequest and then eval() it yourself. (Or, I suppose, stuff the text into a <script> tag you add; the execution environment of eval() is affected by the local scope, so it won't necessarily do what you want it to do.)

编辑— 截至2013年初，我强烈建议您查看更加强大的脚本加载工具，如 Requirejs 。有很多特殊情况要担心。对于真正简单的情况， yepnope 现已内置于 Modernizr 。

edit — As of early 2013, I'd strongly advise looking into a more robust script loading tool like Requirejs. There are a lot of special cases to worry about. For really simple situations, there's yepnope, which is now built into Modernizr.

这篇关于document.createElement（“script”）同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！