分離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; 
});