script和link标签的动态加载和删除问题

关于动态加载script标签和link标签。</span>

很多框架里都有相关代码。这里随便贴一贴实现。</span></a> 

function loadJs(src, callback) {

        var script = document.createElement('script');

        script.type="text/javascript";

        script.language = 'javascript';

        script.src= src;

        var done = false;

        script.onload =script.onreadystatechange = function() {

                if (!done &&(!script.readyState ||  script.readyState == 'loaded' || script.readyState == 'complete')) {

                        done = true;

                }

                script.onload = script.onreadystatechange = null;

                if (callback) {

                        callback.call(script);

                }

        }

        document.getElementsByTagName('head')[0].appendChild(script);

}

function loadCss(url, callback) {

        var link = document.createElement('link');

        link.type="text/css";

        link.rel = "stylesheet";

        link.href = url;

        link.media = 'screen';

        document.getElementsByTagName('head')[0].appendChild(link);

        if (callback) {

                callback.call(link);

        }

}

然而本文关心的是加载后，我又删除了标签会怎么样！！想必不少人对此都有疑问，那么我们就来测试一下。

1.动态加载script，然后又删除

<script>
function loadJs(src, callback) {
        var script = document.createElement('script');
        script.type="text/javascript";
        script.language = 'javascript';
        script.src= src;
        var done = false;
        script.onload =script.onreadystatechange = function() {
                if (!done &&(!script.readyState ||  script.readyState == 'loaded' || script.readyState == 'complete')) {
                        done = true;
                }
                script.onload = script.onreadystatechange = null;
                if (callback) {
                        callback.call(script);
                }
        }
        document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<script>
window.onload = function() {
        loadJs('http://libs.baidu.com/jquery/1.9.1/jquery.min.js', function() {
                // 删除此script标签（this指向script）
                document.getElementsByTagName('head')[0].removeChild(this);
        
                // 每秒都执行一下
                setInterval(function() {
                        $('#div').text(new Date());
                }, 1000)
        });
};
</script>

2.动态加载link标签，然后又删除。</b></a> 

<script>
function loadCss(url, callback) {
        var link = document.createElement('link');
        link.type="text/css";
        link.rel = "stylesheet";
        link.href = url;
        link.media = 'screen';
        document.getElementsByTagName('head')[0].appendChild(link);
        if (callback) {
                callback.call(link);
        }
}
</script>
<script>
window.onload = function() {
        loadCss('http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css', function() {
                var self = this;
                // 2秒后删除
                setTimeout(function() {
                        document.getElementsByTagName('head')[0].removeChild(self);
                }, 2000)
        });
};
</script>

<button type="button" class="btn btn-default btn-lg"> 
<span class="glyphicon glyphicon-user"></span>User </button>

删除了，就不起作用。

总结：其实标准就是这么描述的。。。

script加载完毕，哪怕删除也会保留内部代码执行环境的。

link删除了，附加的样式效果也会删除的。

眼见为实，希望以后大家别再模棱两可了。

 

这篇好文章是转载于：学新通技术网