快捷搜索:   文件 java linux

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 &amp;&amp;(!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删除了,附加的样式效果也会删除的。

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



您可能还会对下面的文章感兴趣:

头像:

设置头像

x
名称(*):
域名    :
邮箱    :

评论内容(*): 刷新评论 提交评论