当前位置: 首页 > 面试题库 >

document.createElement(“ script”)同步

刘星火
2023-03-14
问题内容

是否可以.js同步调用文件,然后立即使用它?

<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时,仍然存在问题。

有什么想法吗?

编辑:

我已经接受了最佳答案,因为它可以很好地说明正在发生的事情。但是,如果有人对如何改进它有任何建议,我欢迎他们。这是我想做的事的一个例子。

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

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

我只是想避免过多地了解内部知识,而只能说:“我希望使用此模块,现在我将使用其中的一些代码。”


问题答案:

您可以<script>使用“ onload”处理程序来创建元素,当浏览器加载并评估脚本时将调用该元素。

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()受本地范围的影响,因此它不一定会执行您想要的操作。)

编辑 - 从2013年初开始
,我强烈建议您研究一个更强大的脚本加载工具,例如Requirejs。有很多特殊情况需要担心。在非常简单的情况下,可以使用yepnope,它已内置在Modernizr中。



 类似资料:
  • 问题内容: 我正在重构一些旧的JavaScript代码,并且正在进行很多DOM操作。 我想知道是否有使用jQuery的更好方法。我一直在尝试: 但是我不确定这是否更好。 问题答案: 这是您在“一个”行中的示例。 更新 :我以为我会更新这篇文章,因为它仍然吸引了大量的流量。在下面的评论中,有一些关于vs vs 作为创建新元素的方式的讨论,这是“最佳”的。 我汇总了一个小的基准,下面是将上述选项重复1

  • <script> defer 和 async 有什么区别? 相同点: <script> 标签必须有 src 属性,不能是内联脚本 加载是异步的 脚本中不能调用 document.write() 不同点: defer 在 HTML 4 中被定义,async 在 HTML 5 中定义 defer 使脚本在 HTML 解析完且触发 DOMContentLoaded 之前按照声明顺序执行,async 则是

  • 我们把项目查看模式切换成Android,所有的文件会通过类型进行归类,这个并不是实际在电脑中的文件结构哦,如果想看实际的物理结构请切换到Project. 切换成Android可以查看所有的Gradle Script: 每个文件后面都有一个灰色字体描述: 1.build.gradle: Project构建文件 2.build.gradle: Module构建文件 3.gradle.propertie

  • SCRIPT FLUSH 清除所有 Lua 脚本缓存。 关于使用 Redis 对 Lua 脚本进行求值的更多信息,请参见 EVAL 命令。 可用版本: >= 2.6.0 复杂度: O(N) , N 为缓存中脚本的数量。 返回值: 总是返回 OK redis> SCRIPT FLUSH OK

  • SCRIPT KILL 杀死当前正在运行的 Lua 脚本,当且仅当这个脚本没有执行过任何写操作时,这个命令才生效。 这个命令主要用于终止运行时间过长的脚本,比如一个因为 BUG 而发生无限 loop 的脚本,诸如此类。 SCRIPT KILL 执行之后,当前正在运行的脚本会被杀死,执行这个脚本的客户端会从 EVAL 命令的阻塞当中退出,并收到一个错误作为返回值。 另一方面,假如当前正在运行的脚本已

  • SCRIPT EXISTS script [script ...] 给定一个或多个脚本的 SHA1 校验和,返回一个包含 0 和 1 的列表,表示校验和所指定的脚本是否已经被保存在缓存当中。 关于使用 Redis 对 Lua 脚本进行求值的更多信息,请参见 EVAL 命令。 可用版本: >= 2.6.0 时间复杂度: O(N) , N 为给定的 SHA1 校验和的数量。 返回值: 一个列表,包含