分离 HTML 和 JS

Question

我正在尝试将嵌入到 HTML 文件中的一些 JS 代码分开。我不拥有此代码，它用于远程支持登录页面，但我不确定如何将它们分开。

我尝试将 JS 代码复制到不同的 .js 文件中，然后将脚本标签添加到链接中，但没有成功。

<script type="text/javascript" src="https://www.islonline.net/webapi/api.js?
libs=join"></script>
<div class="isl-connect-form">
<form id="isl-connect-form" action="#" method="get" onsubmit="return 
isl_connect();">
    <fieldset>
        <legend>Enter your session code and click Connect</legend>
        <div>
            <label for="isl-code-field">Session code</label>
            <input type="text" name="code" id="isl-code-field" value="" />
        </div>
        <input type="submit" name="submit" value="Connect" />
    </fieldset>
</form>
<div id="isl-feedback"></div>
</div>

<script type="text/javascript">
function isl_connect() {
    var doc = document,
        f = doc.getElementById('isl-connect-form'),
        r = doc.getElementById('isl-feedback'),
        is_msie = navigator.userAgent.indexOf('MSIE') >= 0,
        b = null;

    ISLOnline.Join.getSessionInfoByCode(
        f.code.value,
        function (info) {
            r.className = 'isl-success';
            r.innerHTML = 'Connecting to session ' + 
info.getAttribute('sessionCode');
            if (is_msie) {
                r.innerHTML += ', please click the button below:<br />';
                r.appendChild(doc.createElement('br'));
                var b = doc.createElement('input');
                b.type = 'button';
                b.name = 'join';
                b.value = 'Start';
                b.onclick = function () {
                    info.join();
                };
                r.appendChild(b);
            } else {
                info.join();
            }
        },
        function (error) {
            r.className = 'isl-error';
            r.innerHTML = 'Invalid session code!';
            /* comment the line above and uncomment the line below if you 
 wish to
                display the error that is sent by the server */
            //r.innerHTML += error.getDescription();
        }
    );
    return false;
}

Answer 1

创建一个新的 JS 文件并将原始的完整 javascript 放入其中，然后在 islonline.net API 调用之后加载它。我已经举了一个例子。

<script type="text/javascript" src="https://www.islonline.net/webapi/api.js?libs=join"></script>
<div class="isl-connect-form">
  <form id="isl-connect-form">
    <fieldset>
      <legend>Enter your session code and click Connect</legend>
      <div>
        <label for="isl-code-field">Session code</label>
        <input type="text" name="code" id="isl-code-field" value="" />
      </div>
      <input type="submit" name="submit" value="Connect" />
    </fieldset>
  </form>
  <div id="isl-feedback"></div>
</div>
<!-- your new external JS file -->
<script type="text/javascript" src="https://www.example.com/path/to/your/file.js"></script>

您的新 Javascript 文件将包含原始 JS 代码，稍作修改以使用 addEventListener 而不是 onsubmit 来帮助区分 HTML 和 JavaScript：

document.getElementById('isl-connect-form').addEventListener('submit', function isl_connect(event) {
    if (typeof event.preventDefault == 'function') event.preventDefault();

    var doc = document,
        f = this,
        r = doc.getElementById('isl-feedback'),
        is_msie = navigator.userAgent.indexOf('MSIE') >= 0,
        b = null;

    ISLOnline.Join.getSessionInfoByCode(
        f.code.value,
        function (info) {
            r.className = 'isl-success';
            r.innerHTML = 'Connecting to session ' + 
info.getAttribute('sessionCode');
            if (is_msie) {
                r.innerHTML += ', please click the button below:<br />';
                r.appendChild(doc.createElement('br'));
                var b = doc.createElement('input');
                b.type = 'button';
                b.name = 'join';
                b.value = 'Start';
                b.onclick = function () {
                    info.join();
                };
                r.appendChild(b);
            } else {
                info.join();
            }
        },
        function (error) {
            r.className = 'isl-error';
            r.innerHTML = 'Invalid session code!';
            /* comment the line above and uncomment the line below if you wish to
             * display the error that is sent by the server
             */
            //r.innerHTML += error.getDescription();
        }
    );
    return false;
});