Question

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

我尝试将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;
});

分离HTML和JS

1 个答案: