mirror of
https://github.com/novnc/noVNC.git
synced 2026-05-26 07:08:06 +00:00
6517c498b9
The only remaining use we had of WebUtil was getConfigVar(). Let's get rid of that dependency and use our own, query-string-only and richly commented version of that function. It's easier for people to get an overview of vnc_lite if it's all in one file. This commit removes support for the fragment, parameters can only be passed using the query string from now on.
224 lines
7.5 KiB
HTML
224 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<!--
|
|
noVNC example: lightweight example using minimal UI and features
|
|
|
|
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
|
|
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
|
|
-->
|
|
<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">
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: dimgrey;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
#noVNC_status_bar {
|
|
background-color: #6e84a3;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px outset;
|
|
}
|
|
#noVNC_status {
|
|
color: #ffffff;
|
|
font: bold 12px Helvetica;
|
|
margin: auto;
|
|
}
|
|
|
|
#noVNC_left_dummy_elem {
|
|
flex: 1;
|
|
}
|
|
|
|
#noVNC_buttons {
|
|
padding: 1px;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Promise polyfill for IE11 -->
|
|
<script src="vendor/promise.js"></script>
|
|
|
|
<!-- ES2015/ES6 modules polyfill -->
|
|
<script type="module">
|
|
window._noVNC_has_module_support = true;
|
|
</script>
|
|
<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";
|
|
document.head.appendChild(loader);
|
|
});
|
|
</script>
|
|
|
|
<!-- actual script modules -->
|
|
<script type="module" crossorigin="anonymous">
|
|
// RFB holds the API to connect and communicate with a VNC server
|
|
import RFB from './core/rfb.js';
|
|
|
|
var rfb;
|
|
var 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, 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: ';
|
|
}
|
|
|
|
// Send the credentials from the input element
|
|
function setPassword() {
|
|
rfb.sendCredentials({ password: document.getElementById('password_input').value });
|
|
return false;
|
|
}
|
|
|
|
// Since most operating systems will catch Ctrl+Alt+Del
|
|
// before they get a chance to be intercepted by the browser,
|
|
// we provide a way to emulate this key sequence.
|
|
function sendCtrlAltDel() {
|
|
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);
|
|
}
|
|
|
|
// 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;
|
|
|
|
// Read parameters specified in the URL query string
|
|
// By default, use the host and port of server that served this file
|
|
var host = readQueryVariable('host', window.location.hostname);
|
|
var port = readQueryVariable('port', window.location.port);
|
|
var password = readQueryVariable('password', '');
|
|
var path = readQueryVariable('path', 'websockify');
|
|
|
|
// | | | | | |
|
|
// | | | Connect | | |
|
|
// v v v v v v
|
|
(function() {
|
|
|
|
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 = 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>
|
|
</div>
|
|
</body>
|
|
</html>
|