从由外部脚本生成的元素中删除 DOM 元素

Posted 2023-05-07

【中文标题】从由外部脚本生成的元素中删除 DOM 元素

【英文标题】：Removing a DOM element from an element which is generated by an external script

【发布时间】：2015-08-05 04:33:42

【问题描述】：

在一个页面中，我有由外部脚本生成的第三方广告内容。此内容需要一点时间才能加载。我想从广告内容中删除换行符 - 为此，必须等到外部脚本加载并且该脚本中调用的所有函数都停止运行。我正在修改以下想法，但我想它只会等到加载外部脚本：

$.getScript( "http://www.external_site.com/widget.js").done( function(data, textStatus, jqxhr) 
     $('.result').find('br').remove();  
);

在调用 .remove() 函数之前，等待外部脚本执行其所有 DOM 操作的最佳方法是什么？

【问题讨论】：

您可以控制外部站点脚本吗？您可以在完成时触发一个事件，然后您可以将删除脚本作为其基础。

@gautsch - 不幸的是，除了一些用于自定义广告的参数（查询、位置等）之外，我可以操作的外部脚本中/关于外部脚本似乎没有任何内容。

澄清一下：您的广告是否已加载到 iframe 中？

@jmargolisvt 它没有加载到 iframe 中。该广告由一个链接、一个换行符和几个 span 组成，嵌入在一些 div 中。

相关：***.com/questions/21196617/…

【参考方案1】：

一种方法似乎是监听 onreadystatechange 和 load 事件，这些事件是从运行 javascript 的新创建和插入的 <script> 元素触发的。

这在链接的（简单）演示中有效，但我无法证明它对大型项目的可靠性：

// listening for the onreadystatechange and/or load
// events fired from the newly-added "script" elements:
$('script').on('onreadystatechange load', function (e) 
    // performs the following simple/contrived functionality:
    $('body').find('br').remove();
);

JS Fiddle demo.

参考资料：

JavaScript： readystatechange event。 JS 小提琴： Echo JavaScript File and XHR requests。 jQuery: jQuery.getScript()。

【讨论】：

如果加载的脚本涉及异步计算，那么您需要在加载事件中添加一个观察者。该观察者将测试文档，直到找到计算完成的证据。那个时候，不需要的就可以去掉了。

这样就可以了。谢谢！