加载许多jQuery文件而不会发生冲突

时间:2013-04-20 06:57:01

标签: jquery widget

我有livescore网站,我正在为livescore构建一个小部件我的主要问题是: 我加载了JS文件,除了最新的jQuery lib之外,lib加载完全但文件没有加载所有网站。在省略了该网站的所有js文件后,我在我的一个网站上进行了测试。我的问题是如何成功加载该文件而不与其他网站的JS文件冲突? 这是我的代码:

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.3') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
    var script_tag1 = document.createElement('script');
    script_tag1.setAttribute("type","text/javascript");
    script_tag1.setAttribute("src",
        "http://example.com/include-js/jquery_timer.js");

    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else { // Other browsers
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag1);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() {
    jQuery(document).ready(function($) {
    /******* Load CSS *******/
    var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "http://example.com/widget/red.css"
        });
        css_link.appendTo('head');
        var txt;
        txt='<div id="wrapper">';
        txt=txt+'<ul class="tabs">';
        txt=txt+'<li id="fixtures_tab"><a href="#fixtures">Hepsi</a></li>';
        txt=txt+'<li id="live_tab"><a href="#live">Canlı</a></li>';
        txt=txt+'<li id="finished_tab"><a href="#finished">Bitmiş</a></li>';
        txt=txt+'<li id="program_tab"><a href="#program">Başlamamış</a></li>';
        txt=txt+'<li id="postpond_tab"><a href="#postpond">Ertelenen</a></li>';
        txt=txt+'<li id="selected_tab"><a id="f" href="#fav">Oyunlarım (0)</a></li>';
        txt=txt+'</ul>';
        txt=txt+'<div class="tab-container">';
        txt=txt+'<div id="fixtures" class="tab-content"><script type="text/javascript">get_All_Today_Matches();</script></div>';
        txt=txt+'<div id="live" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="finished" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="program" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="postpond" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="fav" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'</div>';
        txt=txt+'</div>';
        $('#widget-container').html(txt);
    });
}
})(); // We call our anonymous function immediately

setTimeout(function(){
var timer = $.timer(function() {
    var cha = "'";
    $('.show_hide').html("");
    setTimeout(function(){
        $('.show_hide').html(cha);
    }, 500);
});
timer.set({ time : 1000, autostart : true });
}, 3000);

编辑:jquery_time.js:

;(function($) {
    $.timer = function(func, time, autostart) { 
        this.set = function(func, time, autostart) {
            this.init = true;
            if(typeof func == 'object') {
                var paramList = ['autostart', 'time'];
                for(var arg in paramList) {if(func[paramList[arg]] != undefined) {eval(paramList[arg] + " = func[paramList[arg]]");}};
                func = func.action;
            }
            if(typeof func == 'function') {this.action = func;}
            if(!isNaN(time)) {this.intervalTime = time;}
            if(autostart && !this.isActive) {
                this.isActive = true;
                this.setTimer();
            }
            return this;
        };
        this.once = function(time) {
            var timer = this;
            if(isNaN(time)) {time = 0;}
            window.setTimeout(function() {timer.action();}, time);
            return this;
        };
        this.play = function(reset) {
            if(!this.isActive) {
                if(reset) {this.setTimer();}
                else {this.setTimer(this.remaining);}
                this.isActive = true;
            }
            return this;
        };
        this.pause = function() {
            if(this.isActive) {
                this.isActive = false;
                this.remaining -= new Date() - this.last;
                this.clearTimer();
            }
            return this;
        };
        this.stop = function() {
            this.isActive = false;
            this.remaining = this.intervalTime;
            this.clearTimer();
            return this;
        };
        this.toggle = function(reset) {
            if(this.isActive) {this.pause();}
            else if(reset) {this.play(true);}
            else {this.play();}
            return this;
        };
        this.reset = function() {
            this.isActive = false;
            this.play(true);
            return this;
        };
        this.clearTimer = function() {
            window.clearTimeout(this.timeoutObject);
        };
        this.setTimer = function(time) {
            var timer = this;
            if(typeof this.action != 'function') {return;}
            if(isNaN(time)) {time = this.intervalTime;}
            this.remaining = time;
            this.last = new Date();
            this.clearTimer();
            this.timeoutObject = window.setTimeout(function() {timer.go();}, time);
        };
        this.go = function() {
            if(this.isActive) {
                this.action();
                this.setTimer();
            }
        };

        if(this.init) {
            return new $.timer(func, time, autostart);
        } else {
            this.set(func, time, autostart);
            return this;
        }
    };
})(jQuery);

0 个答案:

没有答案