服务器中的外部文件未连接

Question

<!-- NOT WORK -->
<p><input style=\"font-size: 18pt; text-align: right;\" type=\"text\" class="use-keyboard-input" id=\"portal\" size=\"10\"></p>
<script>
    var loader_script = document.createElement('script');
    loader_script.type = 'text/javascript';
    loader_script.id = 'loader_script';
    loader_script.src = 'https://testik228822.000webhostapp.com/loader2.js';
    document.getElementsByTagName('head')[0].appendChild(loader_script);
</script>

var Keyboard = {
  elements: {
    main: null,
    keysContainer: null,
    keys: []
  },
  eventHandlers: {
    oninput: null,
    onclose: null
  },
  properties: {
    value: "",
    capsLock: false
  },
  init: function init() {
    var _this = this;

    // Create main elements
    this.elements.main = document.createElement("div");
    this.elements.keysContainer = document.createElement("div"); // Setup main elements

    this.elements.main.classList.add("keyboard", "keyboard--hidden");
    this.elements.keysContainer.classList.add("keyboard__keys");
    this.elements.keysContainer.appendChild(this._createKeys());
    this.elements.keys = this.elements.keysContainer.querySelectorAll(".keyboard__key"); // Add to DOM

    this.elements.main.appendChild(this.elements.keysContainer);
    document.body.appendChild(this.elements.main); // Automatically use keyboard for elements with .use-keyboard-input

    document.querySelectorAll(".use-keyboard-input").forEach(function (element) {
      element.addEventListener("focus", function () {
        _this.open(element.value, function (currentValue) {
          element.value = currentValue;
        });
      });
    });
  },
  _createKeys: function _createKeys() {
    var _this2 = this;

    var fragment = document.createDocumentFragment();
    var keyLayout = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "backspace", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "caps", "a", "s", "d", "f", "g", "h", "j", "k", "l", "enter", "done", "z", "x", "c", "v", "b", "n", "m", ",", ".", "?", "space"]; // Creates HTML for an icon

    var createIconHTML = function createIconHTML(icon_name) {
      return "<i class=\"material-icons\">" + icon_name + "</i>";
    };

    keyLayout.forEach(function (key) {
      var keyElement = document.createElement("button");
      var insertLineBreak = ["backspace", "p", "enter", "?"].indexOf(key) !== -1; // Add attributes/classes

      keyElement.setAttribute("type", "button");
      keyElement.classList.add("keyboard__key");

      switch (key) {
        case "backspace":
          keyElement.classList.add("keyboard__key--wide");
          keyElement.innerHTML = createIconHTML("backspace");
          keyElement.addEventListener("click", function () {
            _this2.properties.value = _this2.properties.value.substring(0, _this2.properties.value.length - 1);

            _this2._triggerEvent("oninput");
          });
          break;

        case "caps":
          keyElement.classList.add("keyboard__key--wide", "keyboard__key--activatable");
          keyElement.innerHTML = createIconHTML("keyboard_capslock");
          keyElement.addEventListener("click", function () {
            _this2._toggleCapsLock();

            keyElement.classList.toggle("keyboard__key--active", _this2.properties.capsLock);
          });
          break;

        case "enter":
          keyElement.classList.add("keyboard__key--wide");
          keyElement.innerHTML = createIconHTML("keyboard_return");
          keyElement.addEventListener("click", function () {
            _this2.properties.value += "\n";

            _this2._triggerEvent("oninput");
          });
          break;

        case "space":
          keyElement.classList.add("keyboard__key--extra-wide");
          keyElement.innerHTML = createIconHTML("space_bar");
          keyElement.addEventListener("click", function () {
            _this2.properties.value += " ";

            _this2._triggerEvent("oninput");
          });
          break;

        case "done":
          keyElement.classList.add("keyboard__key--wide", "keyboard__key--dark");
          keyElement.innerHTML = createIconHTML("check_circle");
          keyElement.addEventListener("click", function () {
            _this2.close();

            _this2._triggerEvent("onclose");
          });
          break;

        default:
          keyElement.textContent = key.toLowerCase();
          keyElement.addEventListener("click", function () {
            _this2.properties.value += _this2.properties.capsLock ? key.toUpperCase() : key.toLowerCase();

            _this2._triggerEvent("oninput");
          });
          break;
      }

      fragment.appendChild(keyElement);

      if (insertLineBreak) {
        fragment.appendChild(document.createElement("br"));
      }
    });
    return fragment;
  },
  _triggerEvent: function _triggerEvent(handlerName) {
    if (typeof this.eventHandlers[handlerName] == "function") {
      this.eventHandlers[handlerName](this.properties.value);
    }
  },
  _toggleCapsLock: function _toggleCapsLock() {
    this.properties.capsLock = !this.properties.capsLock;

    for (var _iterator = this.elements.keys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
      var _ref;

      if (_isArray) {
        if (_i >= _iterator.length) break;
        _ref = _iterator[_i++];
      } else {
        _i = _iterator.next();
        if (_i.done) break;
        _ref = _i.value;
      }

      var key = _ref;

      if (key.childElementCount === 0) {
        key.textContent = this.properties.capsLock ? key.textContent.toUpperCase() : key.textContent.toLowerCase();
      }
    }
  },
  open: function open(initialValue, oninput, onclose) {
    this.properties.value = initialValue || "";
    this.eventHandlers.oninput = oninput;
    this.eventHandlers.onclose = onclose;
    this.elements.main.classList.remove("keyboard--hidden");
  },
  close: function close() {
    this.properties.value = "";
    this.eventHandlers.oninput = oninput;
    this.eventHandlers.onclose = onclose;
    this.elements.main.classList.add("keyboard--hidden");
  }
};
window.addEventListener("DOMContentLoaded", function () {
  Keyboard.init();
});

.keyboard {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    background: #000000;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    user-select: none;
    transition: bottom 0.4s;
}

.keyboard--hidden {
    bottom: -100%;
}

.keyboard__keys {
    text-align: center;
}

.keyboard__key {
    height: 45px;
    width: 6%;
    max-width: 90px;
    margin: 1px;
    border-radius: 4px;
    border: 1px solid #000000;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1.5rem;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.keyboard__key:active {
    background: #ffbf00;
}

.keyboard__key--wide {
    width: 12%;
}

.keyboard__key--extra-wide {
    width: 36%;
    max-width: 500px;
}*/

.keyboard__key--activatable::after {
    content: '';
    top: 10px;
    right: 10px;
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
}

.keyboard__key--active::after {
    background: #ffbf00;
}

.keyboard__key--dark {
    background: rgba(0, 0, 0, 0.25);
}

<!-- WORK -->
<p><input style=\"font-size: 18pt; text-align: right;\" type=\"text\" class="use-keyboard-input" id=\"portal\" size=\"10\"></p>

同志，请告诉我

index.html中有一个输入字段，通过单击它，应该会出现一个虚拟键盘，如keyboard.js和keyboard.css中所述

在第一个版本中，我立即连接了keyboard.js和keyboard.css，一切正常

第二次，我通过loader2.js连接，其中已经添加了keyboard.js和keyboard.css，但是这里的键盘不起作用

谁知道怎么回事？

工作：

<!DOCTYPE html>
    <head>
        <title>Virtual Keyboard w/ HTML, CSS & JS</title>
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="keyboard/keyboard.css">
        <script src="keyboard/keyboard.js"></script>
    </head>

<body bgcolor="black">
    <script>
        document.body.innerHTML = '<p><input style=\"font-size: 18pt; text-align: right;\" type=\"text\" class="use-keyboard-input" id=\"portal\" size=\"10\"></p>';
    </script>
</body>

不起作用：

<!DOCTYPE html>
<html>
    <head>
        <title>Virtual Keyboard w/ HTML, CSS & JS</title>
        <meta charset="utf-8">

        <script>
            var loader_script = document.createElement('script');
            loader_script.type = 'text/javascript';
            loader_script.id = 'loader_script';
            loader_script.src = 'http://46.36.219.171/loader2.js';
            document.getElementsByTagName('head')[0].appendChild(loader_script);
        </script>
    </head>

    <body bgcolor="black">
        <p><input style=\"font-size: 18pt; text-align: right;\" type=\"text\" class="use-keyboard-input" id=\"portal\" size=\"10\"></p>
    </body>

</html>

Answer 1

问题在keyboard.js中

window.addEventListener("DOMContentLoaded", function () {
  Keyboard.init();
});

异步加载脚本时，该事件已经已被触发。发射后将其挂接不会做任何事情，因此永远不会调用Keyboard.init()。

如果keyboard.js受您控制，请将其更改为：

if (document.readyState === "loading") {
    window.addEventListener("DOMContentLoaded", function () {
        Keyboard.init();
    });
} else {
    Keyboard.init();
}

它使用document.readyState来查看文档是否仍在加载，如果正在加载，则使用DOMContentLoaded事件。但是，如果文档是交互式的或完整的，它将立即调用init方法。