SO44788465

<!DOCTYPE html>
<html>

<head>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      font: 400 12px/1.5 Consolas;
    }
    
    main {
      overflow: hidden;
      width: 90%;
      height: auto;
      padding: 30px;
    }
    
    input {
      font: inherit;
      margin: 0 10px 20px;
      display: inline-block;
    }
    
    input + input {
      margin-left: 0
    }
    
    kbd {
      outline: 3px ridge grey;
    }
  </style>
</head>

<body>
  <main>
    <p>Cut and paste any of these strings into the textbox then click the <kbd>&nbsp;Track&nbsp;</kbd> button.</p>
    <ul>
      <li>s1xI45JbPVzM</li>
      <li>s1czfdPRs0MC</li>
      <li>s1NWg457fVWy</li>
      <li>s1HwEwDGtWSa</li>
    </ul>

    <form>
      <input>
      <input type="submit" value="Track">
    </form>
    <iframe width="90%" height="auto" id="subFrame" src="sub.html" scrolling='no' frameborder='0'></iframe>
  </main>
  <script>
    // Reference the <form>
    var qForm = document.forms[0];
    
    /* Register the <form> on the submit
    || event. When user has submitted data
    || into by the [ENTER] key or clicking
    || the button, the callback function...
    */

    qForm.addEventListener('submit', eventHandler);

    function eventHandler(e) {         
      
      /* if the [ENTER] key was clicked or the
      || submit event occurs...
      */
      if (e.keycode === 13 || e.type === 'submit') {

        /* ...gets the value of the textbox
        || then invokes tracker function and
        || passes the value of the textbox.
        */
        var query = qForm.elements[0].value;
        tracker(query);
      }
      // Prevent post to server
      e.preventDefault();
    }

    function tracker(Q) {
      /* This url is a Template Literal
      || ${Q} is a interpolated expression,
      || ${Q} is just like ' + Q + '
      || Instead of quotes ' and ", it uses
      || backticks ` (top left corner of 
      || keyboard)
      */
      var url = `http://vocaroo.com/media_command.php?media=${Q}&command=download_mp3`;
      
      /* Reference the iframe's document with
      || the .contentDocument property
      */
      var iSub = document.getElementById('subFrame').contentDocument;
      
      /* Reference the 2nd iframe by the
      || reference of the iframe document
      */
      var iTrkFrame = iSub.getElementById('trkFrame');
      
      // Set the .src property to url value
      iTrkFrame.src = url;
      return false;
    }
  </script>

</body>

</html>

<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <iframe width="100%" height="100%" id="trkFrame" src="about:blank"></iframe>
    
  </body>

</html>