javascript - 删除附加脚本 javascript

Question

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

这是我获取脚本的代码

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);

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

我想摆脱在添加另一个元素之前附加的前一个元素。

Answer 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()
 }
}

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

Answer 2

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

var scriptAdded = false;

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

Answer 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()

Answer 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);

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

Answer 5

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

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

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

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

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

Answer 6

只需在创建脚本元素时添加一个 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

Answer 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>

Answer 8

最简单的方法。

document.scripts.s16483498357511596685.remove();

Answer 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();
        }
});