由第三方腳本添加操縱DOM元素

外部第三方腳本被加載，增加了一些東西給DOM。

目標：

只要這些東西被添加到DOM，我想操縱它與一個jQuery的一點內容。

爲了確保這一新的DOM元素操縱它之前就存在，我可以做這樣的事情：

var updateText, target; 

updateText = function() { 
    target = $('#targetElement'); 
    if(target.length) { 
     target.text('Updated!'); 
    } else { 
     window.setTimeout(updateText, 500); 
    } 
}; 

updateText();

它只是似乎有點可怕。有沒有更好的方法來處理這種依賴？

相關約束：

第三方腳本有沒有公開的API。
爲了工作，這個特別腳本顯然必須通過一個<script>元素與src屬性中的特定URL加載。因此通過傳遞給$script.js加載腳本不起作用。
運行時，它也會依次加載自己的外部依賴包。即使我可以在啓動自己的代碼之前檢查是否加載了初始腳本，但我不知道我可以檢查這些其他外部腳本。

來源

2015-06-28 mutus

由於你的代碼工作，你正在尋找一個更好/更清潔的實現，這可能會更好張貼在[代碼審查（HTTP：/ /codereview.stackexchange.com/） – Stryner

該第三方腳本是否使用異步代碼？ – Oriol

@Oriol這有點醜，我只是通過一點挖掘。通過'head'附加的'script'元素，我看到幾個依賴需求。 – mutus

您可以使用DOMSubtreeModified事件來做到這一點。這裏有一個例子：

$("#a").bind("DOMSubtreeModified", function() { 
 
    alert("tree changed"); 
 
    $("span").css("background", "blue"); 
 
}); 
 

 

 
$("#add").click(function() {a 
 
    $("#a").append("<span>hey there</span><br>"); 
 
});

div { 
 
    background-color: black; 
 
} 
 

 
span { 
 
    background-color: red; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a"> 
 
</div> 
 

 
<button id="add">Add to Div</button>

來源

2015-06-28 18:10:26 Wazaaaap

這有效（以某種方式），但不推薦使用DOMSubtreeModified。我收集非常好（與性能有關）的理由。 – mutus

由第三方腳本添加操縱DOM元素

回答

相關問題