📄 webvnc.html
字号:
<html>
<head>
<meta name='viewport' content='width=__W__' />
<script type='text/javascript'>
var server = "/";
var screenwidth = 0, screenheight = 0, tilesize = 0;
var screenoffsetx = 0, screenoffsety = 0;
var tilewidth = 0, tileheight = 0;
var serialnumber = (new Date()).getTime();
var mousebutton = function (evt) {mouseEvent(1, evt);};
var mouserevert = 1;
var authcookie = '';
function refreshImage(x, y) {
var el = document.getElementById('img' + x + '_' + y);
if (el) {
el.src = el.getAttribute('baseurl') + "a" + serialnumber;
}
serialnumber++;
}
function screenRefresh() {
for (var x = 0; x <= Math.floor(screenwidth / tilesize); x++) {
for (var y = 0; y <= Math.floor(screenheight / tilesize); y++) {
refreshImage(x, y);
}
}
window.status = "Refresheing";
setTimeout(screenRefresh, 10000);
}
function monitor() {
var req = (typeof(XMLHttpRequest) != "undefined") ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
req.open('GET', server + "c", true);
req.onerror = function (aEvt) { monitor(); };
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
if(req.status == 200) {
tilearr = req.responseText.replace(/_/g, '').split(/;/);
for (var i = 0; i < tilearr.length; i++) {
coordarr = tilearr[i].split(/,/);
var l = coordarr[0];
var t = coordarr[1];
var r = coordarr[2];
var b = coordarr[3];
l -= screenoffsetx; r -= screenoffsetx;
t -= screenoffsety; b -= screenoffsety;
for (var x = Math.floor(l/tilesize); x <= Math.floor(r/tilesize); x++) {
for (var y = Math.floor(t/tilesize); y <= Math.floor(b/tilesize); y++) {
//alert(x + "," + y);
if (x >= 0 && y >= 0) refreshImage(x, y);
}
}
}
setTimeout(monitor, 100);
}
}
};
req.send(null);
}
function setupView() {
tileheight = Math.ceil(screenheight / tilesize);
tilewidth = Math.ceil(screenwidth / tilesize);
var s = "<table id='maintable' width=" + screenwidth + " height=" + screenheight
+ " border=0 borderwidth=0 cellspacing=0 cellpadding=0>";
for (y = 0; y < tileheight; y++) {
s += "<tr>";
for (x = 0; x < tilewidth; x++) {
var baseurl = server + "f" + x + "," + y;
s += "<td><img src='" + baseurl + "' baseurl='" + baseurl + "' width="
+ (x == tilewidth - 1 ? screenwidth % tilesize : tilesize)
+ " height="
+ (y == tileheight - 1 ? screenheight % tilesize : tilesize)
+ " id='img"
+ Math.floor(x/tilesize) + "_" + Math.floor(y/tilesize) + "' /></td>";
}
s += "</tr>";
}
s += "</table><img src='/h' id='crosshair' style='display: none; opacity: 0.6' />";
document.getElementById('maindiv').innerHTML = s;
monitor();
document.getElementById('maintable').onmouseup = function (evt) {
clickEvent(evt);
}
}
function configForWindow(l, t, r, b) {
screenwidth = r - l;
screenheight = b - t;
screenoffsetx = l;
screenoffsety = t;
tilesize = 300;
var s = "<table id='maintable' width=" + screenwidth + " height=" + screenheight
+ " border=0 borderwidth=0 cellspacing=0 cellpadding=0>";
for (y = parseInt(t); y < b; y += tilesize) {
s += "<tr>";
for (x = parseInt(l); x < r; x += tilesize) {
var tilew = (x > r - tilesize) ? r - x: tilesize;
var tileh = (y > b - tilesize) ? b - y : tilesize;
var baseurl = server + "f" + x + "," + y + "," + tilew + "," + tileh;
s += "<td><img src='" + baseurl + "' baseurl='" + baseurl + "' width="
+ tilew + " height=" + tileh + " id='img"
+ Math.floor((x-screenoffsetx)/tilesize) + "_"
+ Math.floor((y-screenoffsety)/tilesize) + "' />\n</td>";
}
s += "</tr>";
}
s += "</table><img src='/h' id='crosshair' style='display: none; opacity: 0.6' />";
s += "<h1 style='text-align: center'><a href='/?mode=windowlist&cookie=" + authcookie + "'>Return to window list</a></h1>";
document.getElementById('maindiv').innerHTML = s;
document.getElementById('maintable').onmouseup = function (evt) {
clickEvent(evt);
}
monitor();
setTimeout(screenRefresh, 10000);
window.scrollTo(0, 1);
}
function getWindowList() {
var req9 = (typeof(XMLHttpRequest) != "undefined") ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
req9.open('GET', server + "l" + serialnumber, true);
req9.onreadystatechange = function (aEvt) {
if (req9.readyState == 4) {
if(req9.status == 200) {
displayWindowList(req9.responseText);
}
}
};
req9.send(null);
}
function go(pass) {
var req = (typeof(XMLHttpRequest) != "undefined") ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
req.open('GET', server + "i" + pass, true);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
if(req.status == 200) {
resparr = req.responseText.split(/,/);
screenwidth = resparr[0];
screenheight = resparr[1];
tilesize = resparr[2];
authcookie = resparr[3];
if (screenwidth == 0) {
alert("Authentication failed");
return;
}
server = "/" + authcookie + "/";
//setupView();
setTimeout("getWindowList()", 1);
}
else
alert("Error loading page\n");
}
};
req.send(null);
}
function displayWindowList(str) {
var s = "";
var a = str.split(';');
a.sort(function (a,b) {
if (a.indexOf("Full Desktop") == 0) return -1;
if (b.indexOf("Full Desktop") == 0) return 1;
a = a.toLowerCase();
b = b.toLowerCase();
if (a < b) return -1;
if (a > b) return 1;
return 0;
});
for (var i = 0; i < a.length; i++) {
var b = a[i].split(',');
if (b.length < 6) continue;
s += "<a class='li' href='javascript:chooseWindow("
+ b[1] + ");' alt='(" + (b[2] == -32000 ? "minimized" : (b[4]-b[2]) + "x" + (b[3]-b[5])) + ")" + "'><nobr>" + b[0] +
/**/
"</nobr></a>";
}
s += "";
document.getElementById('maindiv').innerHTML = s;
}
function chooseWindow(id) {
var req9 = (typeof(XMLHttpRequest) != "undefined") ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
req9.open('GET', server + "w" + id, true);
req9.onreadystatechange = function (aEvt) {
if (req9.readyState == 4) {
if(req9.status == 200) {
var a = req9.responseText.split(",");
//alert(req9.responseText);
var nrul = "/?mode=window&cookie=" + authcookie + "&top="
+ a[0] + "&left=" + a[3] + "&right=" + a[1] + "&bottom=" + a[2]
+ "&pagewidth=" + (a[1]-a[3]+20);
location.assign(nrul);
}
}
};
req9.send(null);
}
var lastClickX, lastClickY;
function clickEvent(evt) {
lastClickX = evt.clientX;
lastClickY = evt.clientY;
var el = document.getElementById('crosshair');
if (!el) return;
el.style.display = 'inline';
el.style.position = 'absolute';
el.style.left = (lastClickX - 25) + "px";
el.style.top = (lastClickY - 25) + "px";
el = document.getElementById('menuleft');
if (el) {
var elx = (lastClickX - 25 - 100);
var ely = (lastClickY - 60);
if (elx < 0) elx += 250;
if (ely < 0) ely = 0;
if (ely + 120 > screenheight) ely = screenheight - 120;
el.style.display = 'block';
el.style.position = 'absolute';
el.style.left = elx + "px";
el.style.top = ely + "px";
}
el = document.getElementById('menuright');
if (el) {
var elx = (lastClickX + 25);
var ely = (lastClickY - 60);
if (elx + 100 > screenwidth) elx -= 250;
if (ely < 0) ely = 0;
if (ely + 120 > screenheight) ely = screenheight - 120;
el.style.display = 'block';
el.style.position = 'absolute';
el.style.left = elx + "px";
el.style.top = ely + "px";
}
menuMouseAction(0);
}
function hideMenu() {
var el = document.getElementById('crosshair');
if (el) el.style.display='none';
el = document.getElementById('menuleft');
if (el) el.style.display='none';
el = document.getElementById('menuright');
if (el) el.style.display='none';
}
function menuMouseAction(button) {
//Also load the tile under the mouse event
var x = Math.floor(lastClickX / tilesize);
var y = Math.floor(lastClickY / tilesize);
var req1 = (typeof(XMLHttpRequest) != "undefined") ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
req1.open('GET', server + "m" + button + ","
+ (parseInt(lastClickX) + parseInt(screenoffsetx) - 10) + "," + (parseInt(lastClickY) + parseInt(screenoffsety) - 10), true);
req1.onreadystatechange = function () {
refreshImage(x, y);
};
req1.send(null);
}
function sendKeys(keys, el) {
if (el) el.setAttribute('disabled', 'disabled');
var req1 = (typeof(XMLHttpRequest) != "undefined") ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
req1.open('GET', server + "k" + escape(keys), false);
req1.onreadystatechange = null;
req1.send(null);
if (el) el.value = '';
if (el) el.removeAttribute('disabled');
}
function menuKeyInput() {
menuMouseAction(1);
var el = document.createElement('div');
el.style.position = 'absolute';
el.style.width = '200px';
el.style.left = (lastClickX - 100) + "px";
el.style.top = (lastClickY - 30) + "px";
el.innerHTML = document.getElementById("keyboard").innerHTML;
document.getElementById('keyboards').appendChild(el);
}
</script>
<style type='text/css'>
body {
padding: 0px;
margin: 0px;
font-family: sans-serif;
background-color: #BBBBCC;
}
table#maintable {
margin: 10px 10px 10px 10px;
}
a {
text-align: center;
padding: 10px;
border-bottom: 1px solid white;
border-top: 1px solid white;
background-color: #CCCCDD;
vertical-align: center;
overflow-X: hidden;
display: block;
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id='keyboards'></div>
<div id='maindiv'>
Password: <input type='password' id='pwbox' /><input type='button' value='Log in' onClick='go(this.previousSibling.value)' />
</div>
<div id='keyboard' style='display: none'>
<table width='200' style='background-color: white; opacity: 0.8;' ID="Table2">
<tr><td>
<input type='text' style='width:100%' id='textbox' onChange='hideMenu(); sendKeys(this.value, this)' NAME="textbox"/>
</td></tr><tr><td align='center'>
<input type='button' value='Backspace' onClick="sendKeys('\x08', null);" ID="Button9" NAME="Button9"/>
<input type='button' value='Enter' onClick="sendKeys('\x0D', null);" ID="Button10" NAME="Button10"/>
<input type='button' value='X' onClick='var e1 = this.parentNode.parentNode.parentNode.parentNode.parentNode; e1.parentNode.removeChild(e1);' ID="Button11" NAME="Button11"/>
</td></tr>
</table>
</div>
<div id='menuleft' style='display: none'>
<table width='100' height='120' style='background-color: white; opacity: 0.8;'>
<tr><td align='center'>
<input type='button' value='Left click' onClick='hideMenu();menuMouseAction(1);' /><br />
<input type='button' value='Right click' onClick='hideMenu();menuMouseAction(3);' /><br />
<input type='button' value='Drag' onClick='hideMenu();menuMouseAction(7);' /><br />
<input type='button' value='Drop' onClick='hideMenu();menuMouseAction(8);' /><br />
<input type='button' value='Cancel' onClick='hideMenu();' /><br />
</td></tr>
</table>
</div>
<div id='menuright' style='display: none'>
<table width='100' height='120' style='background-color: white; opacity: 0.8;'>
<tr><td align='center'>
<input type='button' value='Double click' onClick='hideMenu();menuMouseAction(6);' /><br />
<input type='button' value='Scroll up' onClick='menuMouseAction(4);' /><br />
<input type='button' value='Scroll down' onClick='menuMouseAction(5);' /><br />
<input type='button' value='Middle click' onClick='hideMenu();menuMouseAction(2);' /><br />
<input type='button' value='Text input' onClick='menuKeyInput(); hideMenu();' /><br />
</td></tr>
</table>
</div>
<script language='Javascript'>
//Parse URL parameters
var s = location.search.substring(1);
s = s.split('&');
var parm = new Object();
for (var i = 0; i < s.length; i++) {
var r = s[i].split("=");
parm[unescape(r[0])] = unescape(r[1]);
}
if (parm['pw']) go(parm['pw']);
if (parm['cookie']) {
authcookie = parm['cookie'];
server = "/" + authcookie + "/";
}
if (parm['mode'] == 'window') {
configForWindow(parm['left'], parm['top'], parm['right'], parm['bottom']);
}
if (parm['mode'] == 'windowlist') {
getWindowList();
}
if (parm['mode'] == 'desktop') {
configForDesktop();
}
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -