問(wèn)題描述

我正在將 jQuery 和 jQuery UI 動(dòng)態(tài)加載到頁(yè)面中，我需要知道 jQuery UI 何時(shí)成功擴(kuò)展了 jQuery.

目前我正在使用加載 jQuery UI 的腳本元素的 readystate 來(lái)觸發(fā)我的代碼的運(yùn)行，但我認(rèn)為那時(shí)，腳本已加載，但 jQuery UI 尚未正確初始化.

在定義 $.ui 之前是否是唯一的輪詢選擇?

這是我目前正在處理的代碼:

(load_ui = (callback) ->script2 = document.createElement("腳本")script2.type = "文本/javascript"script2.src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"script2.onload = script2.onreadystatechange = ->console.log 'readystate:', @readystate如果@readystate ==加載"或@readystate ==完成"console.log "jquery ui 已加載"回調(diào) ($ = window.jQuery).noConflict(1), done = 1$(script,script2).remove()document.documentElement.childNodes[0].appendChild script2console.log '附加到頁(yè)面的 jquery ui 腳本元素'(窗口、文檔、req_version、回調(diào)、$、腳本、完成、就緒狀態(tài))->如果不是 ($ = window.jQuery) 或 req_version >;$.fn.jquery 或回調(diào)($)console.log "開(kāi)始加載 jquery"腳本 = document.createElement("腳本")script.type = "文本/javascript"script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + req_version + "/jquery.min.js"script.onload = script.onreadystatechange = ->如果未完成并且 (not (readystate = @readyState) 或 readystate == "loaded" 或 readystate == "complete")console.log "jquery 已加載，現(xiàn)在正在加載 jquery ui"load_ui(回調(diào))document.documentElement.childNodes[0].appendChild 腳本console.log '附加到頁(yè)面的 jquery 腳本元素') 窗口、文檔、1.6.1"、($, L) ->控制臺(tái)日志 $控制臺(tái).log $.ui.version

由于某種原因，jquery ui 腳本元素的 readystate 只返回 undefined.

我認(rèn)為這將完全滿足您的需求，盡可能多地添加依賴.

(function () {函數(shù)getScript(網(wǎng)址，成功){var script = document.createElement('script');腳本.src = 網(wǎng)址；var head = document.getElementsByTagName('head')[0];var已完成=假；script.onload = script.onreadystatechange = function () {if (!completed && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {完成=真；成功();script.onload = script.onreadystatechange = null;head.removeChild(腳本);}};head.appendChild(腳本);}getScript("Scripts/jquery-1.6.1.js", function () {getScript("腳本/jquery-ui-1.8.11.js", function () {警報(bào)($.ui)；});});})();

<塊引用>

測(cè)試 IE7、IE8、IE9、Firefox、Safari、Chrome 和 Opera

I'm dynamically loading jQuery and jQuery UI into a page, and I need to know when jQuery UI has successfully extended jQuery.

At the moment I'm using the readystate of the script element that loads jQuery UI to trigger the running of my code, but I think that at that point, the script has loaded, but jQuery UI hasn't been properly initialised.

Is the only choice to poll until $.ui is defined?

Here's the code that I'm currently wrestling with:

(load_ui = (callback) ->
    script2 = document.createElement("script")
    script2.type = "text/javascript"
    script2.src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"
    script2.onload = script2.onreadystatechange = ->
      console.log 'readystate:', @readystate
      if @readystate == "loaded" or @readystate == "complete"
        console.log "jquery ui is loaded"
        callback ($ = window.jQuery).noConflict(1), done = 1
        $(script,script2).remove()
    document.documentElement.childNodes[0].appendChild script2
    console.log 'jquery ui script element appended to page'
(window, document, req_version, callback, $, script, done, readystate) ->
  if not ($ = window.jQuery) or req_version > $.fn.jquery or callback($)
    console.log "begin loading jquery"
    script = document.createElement("script")
    script.type = "text/javascript"
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + req_version + "/jquery.min.js"
    script.onload = script.onreadystatechange = ->
      if not done and (not (readystate = @readyState) or readystate == "loaded" or readystate == "complete")
        console.log "jquery is loaded, now loading jquery ui"
        load_ui(callback)        

    document.documentElement.childNodes[0].appendChild script
    console.log 'jquery script element appended to page'
) window, document, "1.6.1", ($, L) ->
    console.log $
    console.log $.ui.version

For some reason the readystate of the jquery ui script element just returns undefined.

I think this will do exactly what you need, add more dependency as much as you like.

(function () {
        function getScript(url, success) {
            var script = document.createElement('script');
            script.src = url;

            var head = document.getElementsByTagName('head')[0];
            var completed = false;
            script.onload = script.onreadystatechange = function () {
                if (!completed && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                    completed = true;
                    success();
                    script.onload = script.onreadystatechange = null;
                    head.removeChild(script);
                }
            };
            head.appendChild(script);
        }

        getScript("Scripts/jquery-1.6.1.js", function () {
            getScript("Scripts/jquery-ui-1.8.11.js", function () {
                alert($.ui);
            });
        });
})();

Tested with IE7, IE8, IE9, Firefox, Safari, Chrome and Opera

這篇關(guān)于加載 jQuery 插件后執(zhí)行某些操作的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！