动态加载脚本后访问变量 [英] Accessing variables after dynamically loading a script

问题描述

在前面：这个项目不使用JQuery。

我们有一些第三方JavaScript;它很大而且毛茸茸而且不需要经常使用，因此我们只在需要时动态加载它：

  function loadBigHairyCode（）
 {
 var file = document.createElement（'script'）
 file.setAttribute（type，text / javascript）
 file.setAttribute （src，path / to / big / ugly / script / file.js）
 document.getElementsByTagName（head）[0] .appendChild（file）
 
 magic_needs_to_happen_here 
} 
  

脚本加载工作正常，包括一些未在此处显示的相应CSS。 / p>

加载的文件定义了一个构造函数（称之为 UglyGlobalFunc ），我们在其他地方以通常的方式使用它（ var foo = new UglyGlobalFunc（....））。问题是，因为该文件的其余部分有点难看，我们需要将其修复一点，以免吸收更少。具体来说，在我上面显示魔法需要在这里发生的地方，我想写相当于

  UglyGlobalFunc.prototype.BodgeBodgeBodge = function（）{....} 
  

就像我在编辑底层文件。

但是失败了，因为在代码中的那一点，UglyGlobalFunc是未定义的，这是有道理的。对于简单的间接级别，例如 window.UglyGlobalFunc.proto ... 。所以我的问题是：

1. 动态加载的内容是否可以在执行点（魔法需要发生的地方）访问？或者，在loadBigHairyCode（）返回并且浏览器经历某种刷新周期之后它们才变得真实？




2. 如果是，那我该怎么办？访问他们？某种getGlobalVariableByName（string）函数？




3. 如果没有，那么... aieee。正常理智的人如何去做那种事情？

解决方案

你可以尝试这个

  function loadBigHairyCode（）
 {
 var file = document.createElement（'script '）
 file.onreadystatechange = function（）{//在IE 
中工作if（this.readyState =='complete'）MyFunc（）; 
} 
 file.onload = MyFunc; 
 file.type =text / javascript; 
 file.src =path / to / big / ugly / script / file.js; 
 document.getElementsByTagName（head）[0] .appendChild（file）
} 
 
函数MyFunc（）{
 // .... 
} 
  

更新： 您可以阅读此 。

Right up front: this project doesn't use JQuery.

We have some third-party JavaScript; it's big and hairy and doesn't need to be used often, so we're dynamically loading it only when we need to:

function loadBigHairyCode()
{
    var file = document.createElement('script')
    file.setAttribute("type","text/javascript")
    file.setAttribute("src","path/to/big/ugly/script/file.js")
    document.getElementsByTagName("head")[0].appendChild(file)

    magic_needs_to_happen_here
}

The script loading works fine, including some corresponding CSS that's not shown here.

The loaded file defines a constructor function (call it UglyGlobalFunc) which we use elsewhere in the usual way (var foo = new UglyGlobalFunc(....)). The problem is, because the rest of that file is kinda ugly, we need to fix it up a bit so that it sucks less. Specifically, at the point where I've shown "magic needs to happen here" above, I want to write the equivalent of

UglyGlobalFunc.prototype.BodgeBodgeBodge = function() {....}

just as if I were editing the underlying file.

But that fails, because at that point in the code, UglyGlobalFunc is undefined, which makes sense. Same for a simple level of indirection like window.UglyGlobalFunc.proto.... So my questions are:

1. Are the dynamically loaded contents even accessible at that point of execution (where magic needs to happen)? Or do they not become "real" until after loadBigHairyCode() returns and the browser goes through some kind of refresh cycle?

2. If yes, then how do I access them? Some kind of getGlobalVariableByName("string") function?

3. If not, then... aieee. How do normal sane people go about doing that kind of thing?

解决方案

You may try this

function loadBigHairyCode()
{
    var file = document.createElement('script')
    file.onreadystatechange= function () { // works in IE
        if (this.readyState == 'complete') MyFunc();
    }
    file.onload= MyFunc;
    file.type="text/javascript";
    file.src="path/to/big/ugly/script/file.js";
    document.getElementsByTagName("head")[0].appendChild(file)
}

function MyFunc(){
    //....
}

Update: You may read this.

这篇关于动态加载脚本后访问变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！