由第三方脚本添加操纵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元素

回答

相关问题