Trennen von HTML und JS

Question

Ich versuche, einige JS-Code, der in eine HTML-Datei eingebettet ist, zu trennen. Ich besitze diesen Code nicht, er ist für eine Remote-Support-Zielseite gedacht, aber ich weiß nicht, wie ich sie trennen soll.

Ich habe versucht, den JS-Code in eine andere .js-Datei zu kopieren und dann die Skript-Tags zu verknüpfen, aber kein Glück.

<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

eine Datei neue JS erstellen und die ursprüngliche Voll Javascript setzen innerhalb es dann nach dem islonline.net API-Aufruf laden. Ich habe ein Beispiel gezeigt.

<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> 

Ihre neue Javascript-Datei wird den ursprünglichen JS-Code, mit einer geringfügigen Änderung zu helfen separaten HTML und JavaScript enthält, indem Sie addEventListener statt onsubmit:

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