删除附加脚本 javascript答案

【问题标题】：remove appended script javascript删除附加脚本 javascript
【发布时间】：2012-03-12 12:34:37
【问题描述】：

如何删除我附加的脚本，因为它会导致我的应用出现一些问题。

这是获取脚本的代码

var nowDate = new Date().getTime();
var url = val.redirect_uri + "notify.js?nocache=" + nowDate + "&callback=dummy";
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);

然后我有一个自动加载功能，这会导致创建另一个元素脚本。

我想删除在添加另一个元素之前附加的前一个元素。

【问题讨论】：

只需设置script.src='';，或者删除脚本节点：script.removeNode(true);。
@Teemu 会删除我所有的脚本吗？还是只有附加的脚本？
好吧，不再添加脚本听起来是个好主意，然后删除它...
为什么？！所以你可以在之后立即删除它...???
@gdoron 我将它用于 JSONP 调用，由于回调需要添加脚本。

标签： javascript append appendchild createelement

【解决方案1】：

基本上你可以使用类似于这个的函数来删除脚本标签：

function removeJS(filename){
 var tags = document.getElementsByTagName('script');
 for (var i = tags.length; i >= 0; i--){ //search backwards within nodelist for matching elements to remove
  if (tags[i] && tags[i].getAttribute('src') != null && tags[i].getAttribute('src').indexOf(filename) != -1)
   tags[i].parentNode.removeChild(tags[i]); //remove element by calling parentNode.removeChild()
 }
}

注意，它使用文件名参数来识别要删除的目标脚本。另请注意，目标脚本可能在您尝试删除它时已经执行。

【讨论】：

脚本还在内存中。仍在运行。
正如我在帖子中提到的 - 这是预期的行为，以防您在执行后尝试将其删除。您需要使用 javascript 将其停止，然后将其删除。
是的，你是对的。到目前为止我搜索的是，它被称为内存泄漏。

【解决方案2】：

我只是检查一下您是否已经添加了脚本。添加它然后删除它会增加不必要的复杂性。像这样的东西应该可以工作：

var scriptAdded = false;

if(scriptAdded == false) {
    document.body.appendChild(script);
    scriptAdded = true;
}

【讨论】：

正如 OP 所说，代码每分钟刷新一次，我相信变量 scriptAdded 每次都会为假。
可能OP添加的脚本是JSONP调用？
@ShashankKadne，这部分也让我有些困惑。我认为这是某种类型的 AJAX 刷新，因为 OP 还表示他们正在添加 30 个脚本实例（每次刷新一个）。除非他们发布更多代码，否则我会坚持我原来的答案:)
是的，它是一个 JSONP 调用。我认为这并不能解决我的问题。
解决了问题！谢谢

【解决方案3】：

我做了更多的测试，在你得到你的问题的正确答案之前（希望有一个）你可以试试这个：

<button onclick="foo()">ShowHTML</button>
<script>
(function foo(){
    var b=function moo(){
        var c=document.getElementsByTagName('script');
        alert(document.body.innerHTML);
        c[0].parentElement.removeChild(c[0]);
        alert(document.body.innerHTML);
    }
    var a=setTimeout(b,1000);
    b=null;
})();
foo=null;
</script>

这只是一个测试代码，但它包含一个想法，即如何解决问题。它从 DOM 中删除 <sript>，最后一行破坏了脚本的所有功能。

（代码也有一点细节，这表明setTimeout 会做eval()，不管它如何论证...？）

【讨论】：

@Robin Carlo Catacutan 感谢您的接受。我想您已经注意到，如果您在闭包中定义全局变量，尽管使闭包函数无效，它们仍将保留。而setIntervals 将永远持续下去......

【解决方案4】：

您可以做的是在脚本加载后立即删除它：

var nowDate = new Date().getTime();
var url = val.redirect_uri + "notify.js?nocache=" + nowDate + "&callback=dummy";
var script = document.createElement('script');
script.src = url;
script.onload = function( evt ) {
    document.body.removeChild ( this );
}
document.body.appendChild(script);

无论如何，我认为将脚本附加到标题（所有其他脚本所在的位置）比附加到正文更好。

【讨论】：

【解决方案5】：

只需在创建脚本元素时为其添加一个 id。

这样您就不必遍历与您的源匹配的所有“脚本”标签。相反，只是做

const script = document.createElement("script");

script.src = "SOME_SCRIPT";
script.id = 'SOME_ID';

document.body.append(script);

然后删除

const scriptElem = document.getElementById('SOME_ID'); 
scriptElem.remove()

有些人在这里解释了为什么可以将 id 添加到脚本标签 https://stackoverflow.com/a/2741488/13156886

【讨论】：

【解决方案6】：

在 JSONP 和您使用 jQuery 的情况下，为什么不充分利用 jQuery 的 JSONP 加载工具，它会为您完成后期清理工作？像这样加载 JSONP 资源，不会在 DOM 中留下痕迹：

$.ajax({ url: 'http://example.com/', dataType: 'jsonp' })

用于加载的<script> 标签在加载后立即被删除。如果加载成功。另一方面，失败的请求不会自动清除，您必须自己执行以下操作：

$('head script[src*="callback="]').remove();

在正确的时间打电话。它会删除所有待处理的 JSONP <script> 标签。

【讨论】：

谢谢。但是我必须坚持我的经典剧本，因为我的剧本太多了，而且截止日期也快到了。好吧，我会把这个放在我的脑海中，以满足未来的需求。感谢您向我说明这一点，真的很有帮助。
明白。仍然认为您可以使用删除行来摆脱以前的<script>，如果您将其定位为在 src 中定位“notify.js”，如下所示：$('head script[src*="notify.js"]').remove();

【解决方案7】：

嗯，
我也有同样的需求，因为事件触发了 ajax 调用。一些最早的调用可能会稍后返回，然后覆盖文档由上次调用填充。

removeChild(scriptEl) 不起作用。更改 src 属性也不起作用。

如果jsonp是你唯一的出路，如果您可以控制服务器响应，你可以让那些附加到有区别的回调返回。

只需传递一个timestamp 参数，然后在回调中检查它

//callback
function dummy(res, ts) {
 if(YAHOO.util.Selector.query('script[id='scriptIdPrefix+ts+']').length>0) {
     do your job
 } else {
     do nothing
 }
}

//add script
var scriptIdPrefix='myScriptId';
function ajaxCall() {
    var timestamp = new Date().getTime();
    var scriptId = scriptIdPrefix+timestamp;
    //remove the previous script el
    s=YAHOO.util.Selector.query('script[id^='+scriptIdPrefix+']');
    if(s.length>0) {
        document.body.removeChild(s[0]);
    }
    var script = document.createElement('SCRIPT');
    script.id = scriptId;
    script.type = 'text/javascript';
    script.src = 'http://server/notify.js&callback=dummy&ts='+timestamp;
    document.body.appendChild(script);

}

相应地组装服务器notify.js的结果：

dummy([{"datax":"x","datay":"y"}], 1369838562792)

通过这种方式，您将只有一个像这样的脚本元素参数id

<script id="myScriptId1369838562792" type="text/javascript"  
src="http://server/notify.js?callback=dummy&ts=1369838562792"></script>

【讨论】：

【解决方案8】：

最简单的方法。

document.scripts.s16483498357511596685.remove();

【讨论】：

【解决方案9】：

var flag1=0,flag2=0;
$(window).resize(function(){
    if ($(window).width() < 480){
        flag1++;
        console.log(flag1);
        flag2=0;  
    }
    else 
        if($(window).width() > 480){
            flag2++;
            console.log(flag2);
            flag1=0;
        }   
    if(flag1==1){
        $("body").append("<script class='abc' src='custom.js'/>");
    }
    else
        if(flag2==1){
            $(".abc").remove();
        }
});

【讨论】：