title: unable to get keyboard events in guacamole iframe
body: <p>We are streaming our vnc server using guacamole(<a href="http://guac-dev.org/" rel="nofollow">http://guac-dev.org/</a>) in the browser using an iframe. We are unable to get the keyboard events on the vnc canvas. Though once we click on the div outside the guacamole canvas, focus gets into the required part and key events are captured properly.</p>
  
  <p>We have deployed the application on <a href="http://test-mate.com:8081/#/" rel="nofollow">http://test-mate.com:8081/#/</a></p>
  
  <p>Below is the guacamole rendering code.</p>
  
  <pre><code>&lt;body&gt;
  
      &lt;!-- Display --&gt;
      &lt;div class="displayOuter"&gt;
          &lt;div class="displayMiddle"&gt;
              &lt;div id="display"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Dimensional clone of viewport --&gt;
      &lt;div id="viewportClone"/&gt;
  
      &lt;!-- Notification area --&gt;
      &lt;div id="notificationArea"/&gt;
  
      &lt;!-- Images which should be preloaded --&gt;
      &lt;div id="preload"&gt;
          &lt;img src="images/action-icons/guac-close.png"/&gt;
          &lt;img src="images/progress.png"/&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript" src="scripts/lib/blob/blob.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/lib/filesaver/filesaver.js"&gt;&lt;/script&gt;
  
      &lt;!-- guacamole-common-js scripts --&gt;
      &lt;script type="text/javascript" src="guacamole-common-js/keyboard.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="guacamole-common-js/mouse.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="guacamole-common-js/layer.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="guacamole-common-js/tunnel.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="guacamole-common-js/audio.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="guacamole-common-js/guacamole.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="guacamole-common-js/oskeyboard.js"&gt;&lt;/script&gt;
  
      &lt;!-- guacamole-default-webapp scripts --&gt;
      &lt;script type="text/javascript" src="scripts/session.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/history.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/guac-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/client-ui.js"&gt;&lt;/script&gt;
  
      &lt;!-- Init --&gt;
      &lt;script type="text/javascript"&gt; /* &lt;![CDATA[ */
  
          // Start connect after control returns from onload (allow browser
          // to consider the page loaded).
          window.onload = function() {
              window.setTimeout(function() {
  
                  var tunnel;
  
                  // If WebSocket available, try to use it.
                  //if (window.WebSocket)
                      //tunnel = new Guacamole.ChainedTunnel(
                          //new Guacamole.WebSocketTunnel("websocket-tunnel"),
                          //new Guacamole.HTTPTunnel("tunnel")
                      //);
  
                  // If no WebSocket, then use HTTP.
                 // else
                      tunnel = new Guacamole.HTTPTunnel("tunnel")
  
                  // Instantiate client
                  var guac = new Guacamole.Client(tunnel);
  
                  // Add client to UI
                  guac.getDisplay().className = "software-cursor";
                  GuacUI.Client.display.appendChild(guac.getDisplay());
  
                  // Tie UI to client
                  GuacUI.Client.attach(guac);
  
                  try {
  
                      // Calculate optimal width/height for display
                      var optimal_width = window.innerWidth;
                      var optimal_height = window.innerHeight;
  
                      // Scale width/height to be at least 600x600
                      if (optimal_width &lt; 600 || optimal_height &lt; 600) {
                          var scale = Math.max(600 / optimal_width, 600 / optimal_height);
                          optimal_width = Math.floor(optimal_width * scale);
                          optimal_height = Math.floor(optimal_height * scale);
                      }
  
                      // Get entire query string, and pass to connect().
                      // Normally, only the "id" parameter is required, but
                      // all parameters should be preserved and passed on for
                      // the sake of authentication.
  
                      var connect_string =
                          window.location.search.substring(1)
                          + "&amp;width="  + optimal_width
                          + "&amp;height=" + optimal_height;
  
                      // Add audio mimetypes to connect_string
                      GuacUI.Audio.supported.forEach(function(mimetype) {
                          connect_string += "&amp;audio=" + encodeURIComponent(mimetype);
                      });
  
                      // Add video mimetypes to connect_string
                      GuacUI.Video.supported.forEach(function(mimetype) {
                          connect_string += "&amp;video=" + encodeURIComponent(mimetype);
                      });
  
                      guac.connect(connect_string);
  
                  }
                  catch (e) {
                      GuacUI.Client.showError(e.message);
                  }
  
              }, 0);
          };
  
      /* ]]&gt; */ &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>