javascript - Mootools Request.HTML 返回未定义

Question

我在应用程序的脚本部分 (AutoWWW) 动态加载 Mootools，因为它不允许直接使用 HTML。

我正在使用 Request.HTML 并希望获取页面的 html，但它返回“未定义”消息。我该如何解决这个问题？

我的代码:

function loadScript(url, callback) {
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

var mootools = new Request({
    url: 'http://google.com',
    method: 'get',
    onSuccess: function(responseText){
        alert(responseText);
    }
});

loadScript("https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js", mootools);

Answer 1

您应该考虑两件事。一是可能存在 CORS 限制，二是当您执行 head.appendChild(script); 时，它将异步加载脚本。

这意味着 MooTools 将被加载，但在调用callback函数之前它不可用。要解决此问题，您应该在 loadScript 函数内部设置回调，并从该回调内部调用作为函数参数传递的另一个回调。

function loadScript(url, callback) {
  // Adding the script tag to the head as suggested before
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';

  script.onreadystatechange = callback;
  script.onload = function() {
    new Request({
      url: 'https://jsonplaceholder.typicode.com/posts/1',
      method: 'get',
      onSuccess: callback
    }).send();
  };
  script.src = url;

  head.appendChild(script);
}

loadScript("https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js", function(text) {
  alert(text);
});