[mirror_novnc.git] / vnc_lite.html

<!DOCTYPE html>
<html lang="en">
<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) 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
    -->
    <title>noVNC</title>

    <meta charset="utf-8">

    <style>

        body {
            margin: 0;
            background-color: dimgrey;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        html {
            height: 100%;
        }

        #top_bar {
            background-color: #6e84a3;
            color: white;
            font: bold 12px Helvetica;
            padding: 6px 5px 4px 5px;
            border-bottom: 1px outset;
        }
        #status {
            text-align: center;
        }
        #sendCtrlAltDelButton {
            position: fixed;
            top: 0px;
            right: 0px;
            border: 1px outset;
            padding: 5px 5px 4px 5px;
            cursor: pointer;
        }

        #screen {
            flex: 1; /* fill remaining space */
            overflow: hidden;
        }

    </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;
            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">
        // RFB holds the API to connect and communicate with a VNC server
        import RFB from './core/rfb.js';

        let rfb;
        let desktopName;

        // 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 credentialsAreRequired(e) {
            const password = prompt("Password Required:");
            rfb.sendCredentials({ password: password });
        }

        // 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
        // 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('status').textContent = text;
        }

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

        status("Connecting");

        // 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="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>
</body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html lang="en">
	3	<head>
	4
	5	<!--
	6	noVNC example: lightweight example using minimal UI and features
	7
	8	This is a self-contained file which doesn't import WebUtil or external CSS.
	9
	10	Copyright (C) 2018 The noVNC Authors
	11	noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
	12	This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
	13
	14	Connect parameters are provided in query string:
	15	http://example.com/?host=HOST&port=PORT&scale=true
	16	-->
	17	<title>noVNC</title>
	18
	19	<meta charset="utf-8">
	20
	21	<style>
	22
	23	body {
	24	margin: 0;
	25	background-color: dimgrey;
	26	height: 100%;
	27	display: flex;
	28	flex-direction: column;
	29	}
	30	html {
	31	height: 100%;
	32	}
	33
	34	#top_bar {
	35	background-color: #6e84a3;
	36	color: white;
	37	font: bold 12px Helvetica;
	38	padding: 6px 5px 4px 5px;
	39	border-bottom: 1px outset;
	40	}
	41	#status {
	42	text-align: center;
	43	}
	44	#sendCtrlAltDelButton {
	45	position: fixed;
	46	top: 0px;
	47	right: 0px;
	48	border: 1px outset;
	49	padding: 5px 5px 4px 5px;
	50	cursor: pointer;
	51	}
	52
	53	#screen {
	54	flex: 1; /* fill remaining space */
	55	overflow: hidden;
	56	}
	57
	58	</style>
	59
	60	<!-- Promise polyfill for IE11 -->
	61	<script src="vendor/promise.js"></script>
	62
	63	<!-- ES2015/ES6 modules polyfill -->
	64	<script type="module">
	65	window._noVNC_has_module_support = true;
	66	</script>
	67	<script>
	68	window.addEventListener("load", function() {
	69	if (window._noVNC_has_module_support) return;
	70	const loader = document.createElement("script");
	71	loader.src = "vendor/browser-es-module-loader/dist/" +
	72	"browser-es-module-loader.js";
	73	document.head.appendChild(loader);
	74	});
	75	</script>
	76
	77	<!-- actual script modules -->
	78	<script type="module" crossorigin="anonymous">
	79	// RFB holds the API to connect and communicate with a VNC server
	80	import RFB from './core/rfb.js';
	81
	82	let rfb;
	83	let desktopName;
	84
	85	// When this function is called we have
	86	// successfully connected to a server
	87	function connectedToServer(e) {
	88	status("Connected to " + desktopName);
	89	}
	90
	91	// This function is called when we are disconnected
	92	function disconnectedFromServer(e) {
	93	if (e.detail.clean) {
	94	status("Disconnected");
	95	} else {
	96	status("Something went wrong, connection is closed");
	97	}
	98	}
	99
	100	// When this function is called, the server requires
	101	// credentials to authenticate
	102	function credentialsAreRequired(e) {
	103	const password = prompt("Password Required:");
	104	rfb.sendCredentials({ password: password });
	105	}
	106
	107	// When this function is called we have received
	108	// a desktop name from the server
	109	function updateDesktopName(e) {
	110	desktopName = e.detail.name;
	111	}
	112
	113	// Since most operating systems will catch Ctrl+Alt+Del
	114	// before they get a chance to be intercepted by the browser,
	115	// we provide a way to emulate this key sequence.
	116	function sendCtrlAltDel() {
	117	rfb.sendCtrlAltDel();
	118	return false;
	119	}
	120
	121	// Show a status text in the top bar
	122	function status(text) {
	123	document.getElementById('status').textContent = text;
	124	}
	125
	126	// This function extracts the value of one variable from the
	127	// query string. If the variable isn't defined in the URL
	128	// it returns the default value instead.
	129	function readQueryVariable(name, defaultValue) {
	130	// A URL with a query parameter can look like this:
	131	// https://www.example.com?myqueryparam=myvalue
	132	//
	133	// Note that we use location.href instead of location.search
	134	// because Firefox < 53 has a bug w.r.t location.search
	135	const re = new RegExp('.[?&]' + name + '=([^&#])'),
	136	match = document.location.href.match(re);
	137	if (typeof defaultValue === 'undefined') { defaultValue = null; }
	138
	139	if (match) {
	140	// We have to decode the URL since want the cleartext value
	141	return decodeURIComponent(match[1]);
	142	}
	143
	144	return defaultValue;
	145	}
	146
	147	document.getElementById('sendCtrlAltDelButton')
	148	.onclick = sendCtrlAltDel;
	149
	150	// Read parameters specified in the URL query string
	151	// By default, use the host and port of server that served this file
	152	const host = readQueryVariable('host', window.location.hostname);
	153	let port = readQueryVariable('port', window.location.port);
	154	const password = readQueryVariable('password', '');
	155	const path = readQueryVariable('path', 'websockify');
	156
	157	// \| \| \| \| \| \|
	158	// \| \| \| Connect \| \| \|
	159	// v v v v v v
	160
	161	status("Connecting");
	162
	163	// Build the websocket URL used to connect
	164	let url;
	165	if (window.location.protocol === "https:") {
	166	url = 'wss';
	167	} else {
	168	url = 'ws';
	169	}
	170	url += '://' + host;
	171	if(port) {
	172	url += ':' + port;
	173	}
	174	url += '/' + path;
	175
	176	// Creating a new RFB object will start a new connection
	177	rfb = new RFB(document.getElementById('screen'), url,
	178	{ credentials: { password: password } });
	179
	180	// Add listeners to important events from the RFB module
	181	rfb.addEventListener("connect", connectedToServer);
	182	rfb.addEventListener("disconnect", disconnectedFromServer);
	183	rfb.addEventListener("credentialsrequired", credentialsAreRequired);
	184	rfb.addEventListener("desktopname", updateDesktopName);
	185
	186	// Set parameters that can be changed on an active connection
	187	rfb.viewOnly = readQueryVariable('view_only', false);
	188	rfb.scaleViewport = readQueryVariable('scale', false);
	189	</script>
	190	</head>
	191
	192	<body>
	193	<div id="top_bar">
	194	<div id="status">Loading</div>
	195	<div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
	196	</div>
	197	<div id="screen">
	198	<!-- This is where the remote screen will appear -->
	199	</div>
	200	</body>
	201	</html>