2017-02-27 53 views
1

我希望能夠在div從腳本加載頁面後觸發一些代碼。找出是否已經運行了javascript函數

我無法訪問該腳本,因爲它是從第三方加載到網站上的。

第三方功能運行後如何激活功能?

例如

function threeParty(){ 
    //I have no access to this code 
    $('body').append('<div id="testDiv"></div>'); 
} 

function myFunction(){ 
    $('#testDiv').html("TEST"); 
} 

我希望能夠做這樣的事情......

threePart.done(function(){ 
    myFunction(); 
}); 

$('#testDiv').load(function(){ 
    myFunction(); 
}); 

感謝。

+0

如果你知道什麼* *是附加的,你可以繼續檢查項目是否包含附加的HTML,直到它完成。 –

+3

如果您知道div將被加載的位置,您可以嘗試使用['MutationObserver'](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)進行操作。 –

+0

如果可能,我寧願不使用setInterval或setTimeout。 – rjg132234

回答

1

突變觀察者是甜的。你可以在這裏使用一個。基本上,我們添加一個監聽器給body。監聽器每當添加或刪除節點時都會報告回來。當發生這種情況時,請檢查我們的節點是否已添加。從MDN更多信息:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

//make the observer 
var observer = new MutationObserver(
    //callback function, it gets triggered when anything mutates 
    function (mutations) { 
     mutations.forEach(function (mutation) { 
      //see if the nodes mutated (something was appended) 
      if (mutation.type === "childList") { 
       //then the com changed. see if it has our element 
       if ($('#testDiv').length > 0) { 
        //then the div was appended. do something! 
        myFunction(); 
        //optionally, disconnect the observer if we're done listening 
        observer.disconnect(); 
       } //else, do nothing 
      } 
    }); 
}); 

//above, we made the observer. now, tell it to start observing `body`: 
observer.observe(document.getElementsByTagName('body')[0], {childList: true}); 

注意,我傳遞的參數{childList:true}告訴我們只關心改變人體的子節點,並沒有其他變化的觀測,如更改屬性。

+1

完美的作品!非常感謝。我將不得不更多地瞭解這個MutationObserver的東西。看起來非常有用。 – rjg132234

+0

還有一個問題,是否有任何其他方式與IE的低版本兼容?像IE9和? – rjg132234

+0

MutationObserver的MDN鏈接到MutationEvents,這是被MutationObserver替換的棄用API。你可以像使用普通事件監聽器那樣使用它們。他們在IE9 +工作,但支持是狡猾的,我不知道的細節,你必須做試驗和錯誤https://developer.mozilla.org/en-US/docs/Web/Guide /活動/ Mutation_events – chiliNUT

0

對於那些IE並不是必須的,你可以使用Promises反應代碼在你的JavaScript完成:

$(function() { 
 

 
    // Get info from 3rd party library (using moment.js as an example) 
 
    function momentGetFromNow() { 
 
    var m = moment(new Date(2016, 0, 1)); 
 
    var d = Date.now(); 
 

 
    return new Promise(function(resolve, reject) { 
 
     resolve(m.from(d)); 
 
    }); 
 
    } 
 

 
    // Function to update UI after 3rd party Promise resolution 
 
    function updateUI(value) { 
 
    $("#test").text(value); 
 
    } 
 

 
    // momentGetFromNow returns a Promise object that we can react to 
 
    var p = momentGetFromNow(); 
 

 
    // React to 3rd party function wrapper completion 
 
    p.then(function(result) { 
 
    updateUI(result); 
 
    }).catch(function(reason) { 
 
    console.log('moment.js call failed: ' + reason); 
 
    }); 
 

 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"></div>