動態加載腳本後訪問變量

我們有一些第三方的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。

加載的文件定義了一個構造函數（稱爲UglyGlobalFunc），我們在其他地方以通常的方式使用（var foo = new UglyGlobalFunc(....)）。問題是，因爲該文件的其餘部分有點醜陋，我們需要修復它以使其吸收較少。具體而言，在這裏我向您展示「魔法需要在這裏發生」上面的一點，我想寫的

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

就像如果我是編輯底層文件的等價物。

但是這樣做失敗了，因爲在代碼中，UglyGlobalFunc是未定義的，這是有道理的。對於像window.UglyGlobalFunc.proto...這樣簡單的間接級別也是如此。所以我的問題是：

動態加載的內容是否可以在該執行點（魔法需要發生的地方）訪問？或者，在loadBigHairyCode（）返回並且瀏覽器經歷某種刷新週期之後，它們是否變爲「真實」？
如果是，那我該如何訪問它們？某種getGlobalVariableByName（「string」）函數？
如果不是，那麼... aieee。正常的理智的人如何去做這種事情？

來源

2012-12-11 Ti Strga

你可以試試這個

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(){ 
    //.... 
}

更新：You may read this。

來源

2012-12-11 20:44:37

是的，現在看起來更好：）。我會刪除我以前的評論，現在不相關。 – Teemu

@Teemu，謝謝你:-) –

@Teemu，這種方式腳本不會阻止頁面加載，稱爲'async'。 –

當你創建了一個<script>元素，你必須綁定到其onload事件，這是因爲它的加載和可供使用盡快解僱。

另一種選擇是隻使用document.write('<script src="..."></script>');使其同步加載。然後你可以在下面的行中使用它。只要確保在之前這個頁面完成加載，否則您的整個文檔將被覆蓋。

來源

2012-12-11 20:42:59 bfavaretto

哦，我沒有意識到，個別腳本元素甚至可以有自己的事件。（我不是網絡人。）感謝所有回答的人！ –

@TiStrga''元素也有該事件（可能有用）。 – bfavaretto

動態加載腳本後訪問變量

回答

相關問題