]> git.proxmox.com Git - mirror_novnc.git/blob - vnc_lite.html
Consistently close dialogs on connect/disconnect
[mirror_novnc.git] / vnc_lite.html
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) 2019 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 <!-- Always force latest IE rendering engine (even in intranet) &
22 Chrome Frame. Remove this if you use the .htaccess -->
23 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
24
25 <style>
26
27 body {
28 margin: 0;
29 background-color: dimgrey;
30 height: 100%;
31 display: flex;
32 flex-direction: column;
33 }
34 html {
35 height: 100%;
36 }
37
38 #top_bar {
39 background-color: #6e84a3;
40 color: white;
41 font: bold 12px Helvetica;
42 padding: 6px 5px 4px 5px;
43 border-bottom: 1px outset;
44 }
45 #status {
46 text-align: center;
47 }
48 #sendCtrlAltDelButton {
49 position: fixed;
50 top: 0px;
51 right: 0px;
52 border: 1px outset;
53 padding: 5px 5px 4px 5px;
54 cursor: pointer;
55 }
56
57 #screen {
58 flex: 1; /* fill remaining space */
59 overflow: hidden;
60 }
61
62 </style>
63
64 <!-- Promise polyfill for IE11 -->
65 <script src="vendor/promise.js"></script>
66
67 <!-- ES2015/ES6 modules polyfill -->
68 <script nomodule src="vendor/browser-es-module-loader/dist/browser-es-module-loader.js"></script>
69
70 <!-- actual script modules -->
71 <script type="module" crossorigin="anonymous">
72 // RFB holds the API to connect and communicate with a VNC server
73 import RFB from './core/rfb.js';
74
75 let rfb;
76 let desktopName;
77
78 // When this function is called we have
79 // successfully connected to a server
80 function connectedToServer(e) {
81 status("Connected to " + desktopName);
82 }
83
84 // This function is called when we are disconnected
85 function disconnectedFromServer(e) {
86 if (e.detail.clean) {
87 status("Disconnected");
88 } else {
89 status("Something went wrong, connection is closed");
90 }
91 }
92
93 // When this function is called, the server requires
94 // credentials to authenticate
95 function credentialsAreRequired(e) {
96 const password = prompt("Password Required:");
97 rfb.sendCredentials({ password: password });
98 }
99
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
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.
109 function sendCtrlAltDel() {
110 rfb.sendCtrlAltDel();
111 return false;
112 }
113
114 // Show a status text in the top bar
115 function status(text) {
116 document.getElementById('status').textContent = text;
117 }
118
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);
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
139 document.getElementById('sendCtrlAltDelButton')
140 .onclick = sendCtrlAltDel;
141
142 // Read parameters specified in the URL query string
143 // By default, use the host and port of server that served this file
144 const host = readQueryVariable('host', window.location.hostname);
145 let port = readQueryVariable('port', window.location.port);
146 const password = readQueryVariable('password');
147 const path = readQueryVariable('path', 'websockify');
148
149 // | | | | | |
150 // | | | Connect | | |
151 // v v v v v v
152
153 status("Connecting");
154
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
169 rfb = new RFB(document.getElementById('screen'), url,
170 { credentials: { password: password } });
171
172 // Add listeners to important events from the RFB module
173 rfb.addEventListener("connect", connectedToServer);
174 rfb.addEventListener("disconnect", disconnectedFromServer);
175 rfb.addEventListener("credentialsrequired", credentialsAreRequired);
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);
181 </script>
182 </head>
183
184 <body>
185 <div id="top_bar">
186 <div id="status">Loading</div>
187 <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
188 </div>
189 <div id="screen">
190 <!-- This is where the remote screen will appear -->
191 </div>
192 </body>
193 </html>