Question

我有一个使用加载函数加载jQuery的函数。在加载jQuery后，在接下来的行中我尝试调用jQuery功能，但它们不起作用。如果我重新加载它的功能。我已经尝试使用setTimeOut，回调函数，并在我的调用函数中重新加载相同的函数两次，但是第一次无法读取jQuery。

我正在开发一个平台（iNotes），它不允许我直接访问标题，正文等。我必须以编程方式进行。我没有访问onload，也没有添加.js文件，除了通过javascript。

我想通过该函数加载jQuery（和jQuery-ui），然后立即使用jQuery方法。

从菜单项调用alertTwo（）。

function alertTwo(){
  window.setTimeout(function(){
      chk4_jQuery();
      iPage();
  },0);
}

 function chk4_jQuery() {
    if (typeof jQuery == 'undefined'    ) {
         loadJQ( function(){console.log('finallydone')});
    }else{
        // alert('Found jQuery');
    }
}

function loadJQ(finalCallback) {
    function load1() {
        loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js ', function(){
            console.log('jQuery loaded');
            load2();
        }, 'script');
    }
    function load2() {
        loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', function(){
            console.log('Jquery UI loaded');
            load3();
        },'script');
    }
    function load3() {
        loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css',function(){
            console.log('css loaded');
            finalCallback();
        },'stylesheet');
    }
    load1();
}

function iPage(){
    var page = location.protocol.concat("//").concat(window.location.hostname) +  "/testPage.html";
    var $dialog = $('<div></div>')
               .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
               .dialog({
                   autoOpen: false,
                   modal: true,
                   height: 625,
                   width: 500,
                   title: "Some title"
               });
    $dialog.dialog('open');
    }

在开发者工具的Chrome源标签中，我看到了这些函数的断点，我看到它加载了jQuery库，然后它转到了iPage（）函数并且出错了

var $dialog = $('<div></div>')

当我再次运行该函数时，它会识别jQuery变量并运行。

任何人都知道如何在第一次尝试时使用它？

Answer 1

调用iPage作为回调。

＆＃13;

function alertTwo() {
  chk4_jQuery(); //Invoke `chk4_jQuery` function
}

function chk4_jQuery() {
  loadJQ(iPage); //Invoke `loadJQ` function and pass `iPage` function as argument
}
}

function loadJQ(finalCallback) { // `finalCallback` is nothing but `iPage`
  function load1() {
    loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js ', function() {
      console.log('jQuery loaded');
      load2();
    }, 'script');
  }

  function load2() {
    loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', function() {
      console.log('Jquery UI loaded');
      load3();
    }, 'script');
  }

  function load3() {
    loadScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css', function() {
      console.log('css loaded');
      finalCallback(); //`iPage` is invoked when all other scripts are loaded
    }, 'stylesheet');
  }
  load1();
}

function iPage() {
  var page = location.protocol.concat("//").concat(window.location.hostname) + "/testPage.html";
  var $dialog = $('<div></div>')
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
    .dialog({
      autoOpen: false,
      modal: true,
      height: 625,
      width: 500,
      title: "Some title"
    });
  $dialog.dialog('open');
}

＆＃13;

动态加载JS直到函数完成后才可用

1 个答案: