javascript中动态加载js文件多种解决办法如何动态移除js的引用

103 阅读 0 评论 68 点赞

我是靠谱客的博主高兴方盒，最近开发中收集的这篇文章主要介绍javascript中动态加载js文件多种解决办法如何动态移除js的引用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

  var head = document.head  
               || document.getElementsByTagName("head")[0]|| document.documentElement;  
    var script = document.createElement("script");  
    script.setAttribute("type","text/javascript");  
    script.setAttribute("src",url);  
    //好像只有IE支持  
    script.onreadystatechange=function(){  
    if(document.readyState=='complete'){  
           callback();  
        }  
      };  
    / //  
    head.insertBefore(script, head.firstChild);  

这种方式就是创建一个script对象，在设置script的src属性，这种方式最简单。但是上边利用加载状态来处理，他的兼容不是很好。

　　其实这里把open里面设置为false就是同步加载了，同步加载不需要设置onreadystatechange事件。

方法六：XMLHttpRequest/ActiveXObject同步加载　　

　　在这里我把一些情况考虑在内，写成了一个方法，封装为loadJS.js，方便以后直接调用，代码如下：

?

/**

* 同步加载js脚本

* @param id   需要设置的<
script
>标签的id

* @param url   js文件的相对路径或绝对路径

* @return {Boolean}   返回是否加载成功，true代表成功，false代表失败

*/

function loadJS(id,url){

var  xmlHttp = null;

if(window.ActiveXObject)//IE

{

try {

//IE6以及以后版本中可以使用

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e) {

//IE5.5以及以后版本可以使用

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

}

else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome

{

xmlHttp = new XMLHttpRequest();

}

//采用同步加载

xmlHttp.open("GET",url,false);

//发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错

xmlHttp.send(null);

//4代表数据发送完毕

if ( xmlHttp.readyState == 4 )

{

//0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存

if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)

{

var myHead = document.getElementsByTagName("HEAD").item(0);

var myScript = document.createElement( "script" );

myScript.language = "javascript";

myScript.type = "text/javascript";

myScript.id = id;

try{

//IE8以及以下不支持这种方式，需要通过text属性来设置

myScript.appendChild(document.createTextNode(xmlHttp.responseText));

}

catch (ex){

myScript.text = xmlHttp.responseText;

}

myHead.appendChild( myScript );

return true;

}

else

{

return false;

}

}

else

{

return false;

}

}

此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布，注释还是写的比较清楚的，以后需要加载某个js文件时，只需要一句话就行了，如loadJS("myJS","package.js")。方便实用。

　　如果想要实现不发布还非要兼容所有浏览器，至少我还没找出这样的同步加载的办法，我们只能通过异步加载开出回调函数来实现。

方法七：回调函数方式

　　在同一个文件夹下面创建一个function7.html，代码如下：

?

<
html
>

<
head
>

<
title
>动态加载js</
title
>

<
meta 
http-equiv
=
"Content-Type" 
content
=
"text/html;charset=UTF-8"
>

<
script 
type
=
"text/javascript"
>

function init()

{

//加载package.js文件，设置script的id为yy

loadJs("yy","package.js",callbackFunction);

}

function callbackFunction()

{

functionOne();

}

function loadJs(sid,jsurl,callback){

var nodeHead = document.getElementsByTagName('head')[0];

var nodeScript = null;

if(document.getElementById(sid) == null){

nodeScript = document.createElement('script');

nodeScript.setAttribute('type', 'text/javascript');

nodeScript.setAttribute('src', jsurl);

nodeScript.setAttribute('id',sid);

if (callback != null) {

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

if (nodeScript.ready) {

return false;

}

if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {

nodeScript.ready = true;

callback();

}

};

}

nodeHead.appendChild(nodeScript);

} else {

if(callback != null){

callback();

}

}

}

</
script
>

</
head
>

<
body
>

<
input 
type
=
"button" 
value
=
"测试按钮" 
onclick
=
"init()"
/>

</
body
>

</
html
>

jQuery.ajax({

    
url : src,

    
type : 
"GET"
,

    
dataType : 
"script"
,

    
async : 
false
,

    
global : 
false
,

    
"throws" 
: 
true

});

var 
src = 
'3.js'
;

var 
xhr = 
new 
window.XMLHttpRequest();

xhr.open(
'GET'
,src,
false
);

xhr.send(
null
);

var 
responseText = xhr.responseText;

function 
globalEval(data){

    
window[
"eval"
].call(window, data);

}

globalEval(responseText);

//var $a = aa();

var 
JSLoader = {

    
browser : {

        
ie : /msie/.test(window.navigator.userAgent.toLowerCase()),

        
moz : /gecko/.test(window.navigator.userAgent.toLowerCase()),

        
opera : /opera/.test(window.navigator.userAgent.toLowerCase()),

        
safari : /safari/.test(window.navigator.userAgent.toLowerCase())

},

    
call : (
function
() {

        
var 
_file_array = 
new 
Array();
//保存已添加的文件

/**

         
* 判断文件是否存在

         
* @param tag 元素名称

         
* @param url 文件url

         
* @return 如果存在，返回true；否则，返回false

*/

        
function 
hasFile(tag, url) {

            
var 
contains = 
false
;

            
var 
files = document.getElementsByTagName(tag);

            
var 
type = tag == 
"script" 
? 
"src" 
: 
"href"
;

            
for 
( 
var 
i = 0, len = files.length; i < len; i++) {

                
if 
(files[i].getAttribute(type) == url) {

                    
contains = 
true
;

                    
break
;

}

}

            
for
(
var 
i=0,len=_file_array.length;i<len;i++){

                
if
(url==_file_array[i]){

                    
contains = 
true
;

                    
break
;

}

}

            
return 
contains;

}

/**

         
* 串行加载所有js文件

         
* 如果所加载的js文件不存在页面中，则js文件一个接一个加载完成只至最后一个js文件加载完成后，执行回调函数

         
* 如果所加载的js文件已经加载过，则直接执行回调函数。

         
* @param scripts:['jsFile']

         
* @param callback:回调函数[可选]

         
* @paren parent:js文件加载的位置，默认为head

*/

        
function 
serielLoadScripts(scripts, callback,parent) {

            
removeExist(scripts);

            
if
(scripts.length==0){

                
if
(callback) callback();

                
return
;

}

            
parent = parent || 
'head'
;

            
var 
head = document.getElementsByTagName(parent)[0]

                    
|| document.documentElement;

            
var 
s = 
new 
Array();

            
var 
last = scripts.length - 1;

            
var 
recursiveLoad = 
function
(i) { 
// 递归

                
if
(!hasFile(
"script"
, scripts[i])){

                    
s[i] = document.createElement(
"script"
);

                    
s[i].setAttribute(
"type"
, 
"text/javascript"
);

                    
s[i].onload = s[i].onreadystatechange = 
function
() {

                        
if 
(!JSLoader.browser.ie || 
this
.readyState == 
"loaded"

                                
|| 
this
.readyState == 
"complete"
) {

                            
this
.onload = 
this
.onreadystatechange = 
null
;

                            
this
.parentNode.removeChild(
this
);

                            
if 
(i != last)

                                
recursiveLoad(i + 1);

                            
else 
if 
(
typeof 
(callback) == 
"function"
)

                                
callback();

}

};

                    
s[i].setAttribute(
"src"
, scripts[i]);

                    
head.appendChild(s[i]);

                
}
else
{

                    
if
(callback){

                        
callback();

}

}

};

            
recursiveLoad(0);

}

/**

         
* 同步加载JS文件

         
* 如果所加载的js文件不存在页面中，则将在所有js文件加载完成以后才执行回调函数。

         
* 如果所加载的js文件已经加载过，则直接执行回调函数。

         
* @param scripts:['jsFile']

         
* @param callback:回调函数[可选]

*/

        
function 
parallelLoadScripts(scripts, callback,parent) {

            
removeExist(scripts);

            
if
(scripts.length==0){

                
if
(callback) callback();

                
return
;

}

            
parent = parent || 
'head'
;

            
var 
head = document.getElementsByTagName(parent)[0]|| document.documentElement;

            
var 
s = 
new 
Array();

            
var 
loaded = 0;

            
for 
( 
var 
i = 0; i < scripts.length; i++) {

                
if
(!hasFile(
"script"
, scripts[i])){

                    
s[i] = document.createElement(
"script"
);

                    
s[i].setAttribute(
"type"
, 
"text/javascript"
);

                    
s[i].setAttribute(
"src"
, scripts[i]);

                    
s[i].onload = s[i].onreadystatechange = 
function
() {

                        
if 
(!JSLoader.browser.ie || 
this
.readyState == 
"loaded"

                                
|| 
this
.readyState == 
"complete"
) {

                            
loaded++;

                            
this
.onload = 
this
.onreadystatechange = 
null
;

                            
this
.parentNode.removeChild(
this
);

                            
if 
(loaded == scripts.length&& 
typeof 
(callback) == 
"function"
){

                                
callback();

}

}

};

                    
head.appendChild(s[i]);

                    
_file_array.push(scripts[i]);

}

}

}

        
function 
cssLoad(csses,callback){

            
removeExist(csses);

            
if
(csses.length==0&&callback){

                
callback();

                
return
;

}

            
var 
head = document.getElementsByTagName(
'head'
)[0]|| document.documentElement;

            
var 
s = 
new 
Array();

            
var 
loaded = 0;

            
for 
( 
var 
i = 0; i < csses.length; i++) {

                
if 
(!hasFile(
"css"
, csses[i])) {

                    
s[i] = document.createElement(
"link"
);

                    
s[i].setAttribute(
"type"
, 
"text/css"
);

                    
s[i].setAttribute(
'rel'
, 
'stylesheet'
);

                    
s[i].setAttribute(
'href'
, csses[i]);

                    
s[i].onload = s[i].onreadystatechange = 
function
() {

                        
if 
(!JSLoader.browser.ie || 
this
.readyState == 
"loaded"

                                
|| 
this
.readyState == 
"complete"
) {

                            
loaded++;

                            
this
.onload = 
this
.onreadystatechange = 
null
;

                            
if 
(loaded == scripts.length

                                    
&& 
typeof 
(callback) == 
"function"
) {

                                
callback();

}

}

};

                    
head.appendChild(s[i]);

                    
_file_array.push(csses[i]);

}

}

}

        
function 
removeExist(arr){

            
for
(
var 
i=0,len=arr.length;i<len;i++){

                
for
(
var 
k=0,len_k=_file_array.length;k<len_k;k++){

                    
if
(arr[i]==_file_array[k]){

                        
arr.splice(i,1);

}

}

}

}

        
return 
{

            
seriel : serielLoadScripts,

            
paralle : parallelLoadScripts,

            
css:cssLoad

};

    
})()

};

/**

 
* JS动态导入，外部调用接口

*

 
* 注意：为了保证动态引入的js文件中的事件能够被正常执行，

 
*         请将需要执行事件的动作放入回调函数中执行

*

 
* 以jquery为例：

 
* 在点击菜单A时，动态引入js文件a.js,b.js，并且生成一个按钮Btn，Btn的onclick事件函数show()位于a.js中。

 
* 代码如下：

 
* $(A).click(function(){

 
*         jsLoader(['a.js','b.js'],function(){

 
*             $('<input type="button" value="测试" onclick="show()">').appendTo($(A));

 
*         });           

 
* });

*

 
* 也可以只是纯粹的引入js。这种情况可能会出现问题。

 
* 原因：js文件还未加载完成就使用其中的函数或者变量。

 
* 改写上面例子，代码如下：

 
* $(A).click(function(){

 
*         jsLoader(['a.js','b.js']);           

 
* });

 
* $('<input type="button" value="测试" onclick="show()">').appendTo($(A));

 
* 这样写的话，可能会出现show()未定义，解决方法未找到

*/

var 
jsLoader = 
function
(scripts,callback,parent,type){

    
type = type || 
"parallel"
;
//默认为并行模式

    
if
(type==
"seriel"
){

        
JSLoader.call.seriel(scripts,callback,parent);

    
}
else
{

        
JSLoader.call.paralle(scripts,callback,parent);

}

};

/**

 
* CSS动态导入，外部调用接口

*/

var 
cssLoader = 
function
(csses,callback){

    
JSLoader.call.css(csses,callback);

};

var rootObject=document.getElementById("divId");
   var oScript = document.createElement( "script" );
   oScript.type = "text/javascript";
   oScript.src = test.js; //test.js方法中有一个方法function test(){alert("test");}
   rootObject.appendChild(oScript);

如何动态移除js的引用

引用文件时赋予ID 使用jquery删除 即可 $(id).remove();

删除文件引用并没什么用

建议删除文件引用后 要释放该引用文件产生内存

$("script[src='http://www.baidu.com/haha.js']").remove()

在一个JS文件中引用另一个JS文件
注意：在html文件导入a.js时，应该把script></script写在/body>后面，否则 document.write()方法有问题。在载入页面后，浏览器输出流自动关闭；在此之后，任何一个对当前页面进行操作的 document.write()方法将打开—个新的输出流。它将清除当前页面内容(包括源文档的任何变量或值)，因此，假如希望用脚本生成的HTML替换当前页面，就必须把HTML内容连接起来赋给一个变量、使用一个document.write()方法完成写操作，不必清除文档并打开一个新数据流，一个document.write()调用就可完成所有的操作。
关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后．必须关闭输出流。在延时脚本的最后一个document.write()方法后面．必须确保含有document.close()方法，不这样做就不能显示图片和表单。并且，任何后面调用的document.write()方法只会把内容追加到页面后，而不会清除现有内容来写入新值。
在当前JS文件中加入：
document.write("script language='javascript' src='js/jquery-1.3.1.min.js'></script");

例如：在a.js中要引用b.js的函数
a.js内容如下：
document.write("script language='javascript' src='b.js'></script");
function test()
{
b();
}

b.js内容如下：
function b()
{
alert("b");
}
***********************************************************
在处理较为复杂的页面逻辑时可能用到多个js文件，比如将实现特定功能的js文件分开放在不同的文件里面，但是我又不希望在页面引用时多个js文件，所以就考虑在一个js文件里面引用另一个js文件了。
具体实现：
HTML文件:
html>
<body>
<input type="button" value="ok" οnclick="javascript:b()">
</body>

<script language="JAVASCRIPT" src='b.js'>
</script>
</html

b.js代码：程序代码
new_element=document_createElement_x_x_x_x_x("script");
new_element.setAttribute("type","text/javascript");
new_element.setAttribute("src","a.js");
document.body.a(new_element);
function b()
{ a();}
a.js代码：程序代码
function a()
{ alert("a");}

另外例子
<script>
var obj=document.getElementByIdx_x_x_x("某控件");
var ele=document_createElement_x_x_x("script");
ele.src="路径";
obj.a(ele);

一个比较全部在动态加方法

/*
    动态加载js v1.0 by：dum 2012-03-17 www.hzhuti.com
    用法：src="webJsBase.js?load=a,b"
    注：加载本目录下js
*/
var webJsBase = {
    require: function(libraryName) {
        document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
    },
    load: function(defaultLoad) {
        if((typeof Prototype=='undefined')||(typeof Element == 'undefined')||(typeof Element.Methods=='undefined'))
        throw ('prototype lib 加载失败！');
        if(typeof defaultLoad=='undefined')defaultLoad='';
        var js = /webJsBase.js(?.*)?$/;
        $$('head script[src]').findAll(function(s) {
            return s.src.match(js);
        }).each(function(s) {
            var path = s.src.replace(js, '');
            var includes = s.src.match(/?.*load=([a-zA-Z0-9_,]*)/);
            (includes ? includes[1] : defaultLoad).split(',').each(function(include) {
                webJsBase.require(path + include + '.js');
            });
        });
    }
};

webJsBase.load(); //这里参数可以指定默认要加载的js文件

这是最简单的方法在加载完后再利用直接document.write 如下图。

document.write("<script src='test.js'></script>");

</script>

给script加个id再去动态改变已有script的src 属性

代码如下复制代码
<script src='' id="s1"></script>

s1.src="test.js"

</script>

这里利用getElementsByTagName('HEAD')动态创建 script元素

var oHead = document.getElementsByTagName('HEAD').item(0);

var oScript= document.createElement("script");

oScript.type = "text/javascript";

oScript.src="test.js";

oHead.appendChild( oScript);

</script>

还可以这样尝试一下，自定一个函数

function include(src) {
HTMLCode = '<script language="javascript" src="' + src + '"></script>';
document.write(HTMLCode);
}

调用方法，这样看上去就你php的include函数了

代码如下复制代码

include(baseDir + "/Prototype.js");
include(baseDir + "/Map.js");
include(baseDir + "/MapEvent.js");

include(baseDir + "/model/MapModel.js");
include(baseDir + "/model/MapType.js");
include(baseDir + "/model/Tile.js");

还有朋友说可以使用ExtJs4 动态加载js这里我就不介绍了，上面的方法足够让你实现动态加载js了.

所以在采用这类方法动态加载Js 的同时，主界面的Js脚本是继续执行的，所以可能出现通过异步加载的Js代码得不到预期的效果的情况。

这时候可以考虑采用Ajax加载Js的方法。

最后

以上就是高兴方盒为你收集整理的javascript中动态加载js文件多种解决办法如何动态移除js的引用的全部内容，希望文章能够帮你解决javascript中动态加载js文件多种解决办法如何动态移除js的引用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：JAVA开发
浏览次数：103 次浏览
发布日期：2024-01-12 01:45:48
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_ogf0_12__23__22_x.html

javascript中动态加载js文件多种解决办法如何动态移除js的引用

概述

如何动态移除js的引用

最后

评论列表共有 0 条评论

发表评论取消回复

javascript中动态加载js文件多种解决办法 如何动态移除js的引用

概述

如何动态移除js的引用

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

javascript中动态加载js文件多种解决办法如何动态移除js的引用

发表评论取消回复