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