<!DOCTYPE html>
-<html>
+<html lang="en">
<head>
<!--
This is a self-contained file which doesn't import WebUtil or external CSS.
- Copyright (C) 2012 Joel Martin
- Copyright (C) 2018 Samuel Mannehed for Cendio AB
+ Copyright (C) 2018 The noVNC Authors
noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
Connect parameters are provided in query string:
http://example.com/?host=HOST&port=PORT&scale=true
- or the fragment:
- http://example.com/#host=HOST&port=PORT&scale=true
-->
<title>noVNC</title>
<meta charset="utf-8">
- <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
- Remove this if you use the .htaccess -->
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
- <style type="text/css">
+ <style>
body {
margin: 0;
height: 100%;
}
- #noVNC_status_bar {
+ #top_bar {
background-color: #6e84a3;
- width: 100%;
- display: flex;
- justify-content: space-between;
+ color: white;
+ font: bold 12px Helvetica;
+ padding: 6px 5px 4px 5px;
border-bottom: 1px outset;
}
- #noVNC_status {
- color: #ffffff;
- font: bold 12px Helvetica;
- margin: auto;
+ #status {
+ text-align: center;
}
-
- #noVNC_left_dummy_elem {
- flex: 1;
+ #sendCtrlAltDelButton {
+ position: fixed;
+ top: 0px;
+ right: 0px;
+ border: 1px outset;
+ padding: 5px 5px 4px 5px;
+ cursor: pointer;
}
- #noVNC_buttons {
- padding: 1px;
- flex: 1;
- display: flex;
- justify-content: flex-end;
+ #screen {
+ flex: 1; /* fill remaining space */
+ overflow: hidden;
}
</style>
<script>
window.addEventListener("load", function() {
if (window._noVNC_has_module_support) return;
- var loader = document.createElement("script");
- loader.src = "vendor/browser-es-module-loader/dist/browser-es-module-loader.js";
+ const loader = document.createElement("script");
+ loader.src = "vendor/browser-es-module-loader/dist/" +
+ "browser-es-module-loader.js";
document.head.appendChild(loader);
});
</script>
<!-- actual script modules -->
<script type="module" crossorigin="anonymous">
- // WebUtil contains helper functions for browser features
- import * as WebUtil from './app/webutil.js';
// RFB holds the API to connect and communicate with a VNC server
import RFB from './core/rfb.js';
- var rfb;
- var desktopName;
+ let rfb;
+ let desktopName;
- // When this function is called we have received
- // a desktop name from the server
- function updateDesktopName(e) {
- desktopName = e.detail.name;
+ // When this function is called we have
+ // successfully connected to a server
+ function connectedToServer(e) {
+ status("Connected to " + desktopName);
+ }
+
+ // This function is called when we are disconnected
+ function disconnectedFromServer(e) {
+ if (e.detail.clean) {
+ status("Disconnected");
+ } else {
+ status("Something went wrong, connection is closed");
+ }
}
// When this function is called, the server requires
// credentials to authenticate
- function credentials(e) {
- // Let's create a password input
- var form = document.createElement('form');
- form.innerHTML = '<label></label>';
- form.innerHTML += '<input type=password size=10 id="password_input">';
- form.onsubmit = setPassword;
-
- // Bypass status() because it sets text content
- // which doesn't allow adding elements
- document.getElementById('noVNC_status').innerHTML = '';
- document.getElementById('noVNC_status').appendChild(form);
- document.getElementById('noVNC_status').querySelector('label').textContent = 'Password Required: ';
+ function credentialsAreRequired(e) {
+ const password = prompt("Password Required:");
+ rfb.sendCredentials({ password: password });
}
- // Send the credentials from the input element
- function setPassword() {
- rfb.sendCredentials({ password: document.getElementById('password_input').value });
- return false;
+ // When this function is called we have received
+ // a desktop name from the server
+ function updateDesktopName(e) {
+ desktopName = e.detail.name;
}
// Since most operating systems will catch Ctrl+Alt+Del
rfb.sendCtrlAltDel();
return false;
}
+
// Show a status text in the top bar
function status(text) {
- document.getElementById('noVNC_status').textContent = text;
- }
-
- // When this function is called we have
- // successfully connected to a server
- function connected(e) {
- document.getElementById('sendCtrlAltDelButton').disabled = false;
- status("Connected to " + desktopName);
+ document.getElementById('status').textContent = text;
}
- // This function is called when we are disconnected
- function disconnected(e) {
- document.getElementById('sendCtrlAltDelButton').disabled = true;
- if (e.detail.clean) {
- status("Disconnected");
- } else {
- status("Something went wrong, connection is closed");
+ // This function extracts the value of one variable from the
+ // query string. If the variable isn't defined in the URL
+ // it returns the default value instead.
+ function readQueryVariable(name, defaultValue) {
+ // A URL with a query parameter can look like this:
+ // https://www.example.com?myqueryparam=myvalue
+ //
+ // Note that we use location.href instead of location.search
+ // because Firefox < 53 has a bug w.r.t location.search
+ const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
+ match = document.location.href.match(re);
+ if (typeof defaultValue === 'undefined') { defaultValue = null; }
+
+ if (match) {
+ // We have to decode the URL since want the cleartext value
+ return decodeURIComponent(match[1]);
}
+
+ return defaultValue;
}
- document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
+ document.getElementById('sendCtrlAltDelButton')
+ .onclick = sendCtrlAltDel;
- // Read parameters specified in the URL (query string or fragment)
+ // Read parameters specified in the URL query string
// By default, use the host and port of server that served this file
- var host = WebUtil.getConfigVar('host', window.location.hostname);
- var port = WebUtil.getConfigVar('port', window.location.port);
- var password = WebUtil.getConfigVar('password', '');
- var path = WebUtil.getConfigVar('path', 'websockify');
+ const host = readQueryVariable('host', window.location.hostname);
+ let port = readQueryVariable('port', window.location.port);
+ const password = readQueryVariable('password', '');
+ const path = readQueryVariable('path', 'websockify');
// | | | | | |
// | | | Connect | | |
// v v v v v v
- (function() {
- status("Connecting");
+ status("Connecting");
- // Build the websocket URL used to connect
- var url;
- if (window.location.protocol === "https:") {
- url = 'wss';
- } else {
- url = 'ws';
- }
- url += '://' + host;
- if(port) {
- url += ':' + port;
- }
- url += '/' + path;
-
- // Creating a new RFB object will start a new connection
- rfb = new RFB(document.body, url,
- { credentials: { password: password } });
-
- // Add listeners to important events from the RFB module
- rfb.addEventListener("connect", connected);
- rfb.addEventListener("disconnect", disconnected);
- rfb.addEventListener("credentialsrequired", credentials);
- rfb.addEventListener("desktopname", updateDesktopName);
-
- // Set parameters that can be changed on an active connection
- rfb.viewOnly = WebUtil.getConfigVar('view_only', false);
- rfb.scaleViewport = WebUtil.getConfigVar('scale', false);
- })();
+ // Build the websocket URL used to connect
+ let url;
+ if (window.location.protocol === "https:") {
+ url = 'wss';
+ } else {
+ url = 'ws';
+ }
+ url += '://' + host;
+ if(port) {
+ url += ':' + port;
+ }
+ url += '/' + path;
+
+ // Creating a new RFB object will start a new connection
+ rfb = new RFB(document.getElementById('screen'), url,
+ { credentials: { password: password } });
+
+ // Add listeners to important events from the RFB module
+ rfb.addEventListener("connect", connectedToServer);
+ rfb.addEventListener("disconnect", disconnectedFromServer);
+ rfb.addEventListener("credentialsrequired", credentialsAreRequired);
+ rfb.addEventListener("desktopname", updateDesktopName);
+
+ // Set parameters that can be changed on an active connection
+ rfb.viewOnly = readQueryVariable('view_only', false);
+ rfb.scaleViewport = readQueryVariable('scale', false);
</script>
</head>
<body>
- <div id="noVNC_status_bar">
- <div id="noVNC_left_dummy_elem"></div>
- <div id="noVNC_status">Loading</div>
- <div id="noVNC_buttons">
- <input type=button value="Send CtrlAltDel"
- id="sendCtrlAltDelButton">
+ <div id="top_bar">
+ <div id="status">Loading</div>
+ <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
+ </div>
+ <div id="screen">
+ <!-- This is where the remote screen will appear -->
</div>
- </div>
</body>
</html>
projects / mirror_novnc.git / blobdiff