Custom Error Page
When an error occurs in KioWare, it is a good idea to have your own error page that will display the error, rather than letting the IE error page show.
Copy to Clipboard |
View Code In Action
|
Back
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--
DIRECTIONS
In the KioWare Config Tool
Browser Tab
Error Handling:
Check Enable Error Redirection
Check Send Error Parameters to URL
Set Redirection URL to something like:
http://localhost/kiosk_error_handler.html?show_desc=1&show_code=1&show_url=1
the =1 can be toggled (1 is on, 0 is off)
This page auto refreshes so that wireless networks will eventually show the page that it was originally trying to.
The default refresh time is 20 seconds. This can be changed like so:
var timeLeft= 20;
to
var timeLeft= 5;
Which would make it 5 seconds instead of 20.
-->
<head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Error Occured</title>
<style>
body
{
font-family:Arial,Helvetica,Sans-serif;
font-size:14px;
color:black;
background-color:white;
}
img{border:none;}
table{border:ridge red 4px; padding:4px;}
th{border:none; padding:4px;}
td{border:none; padding:3px; text-align:center;}
div{width:100%;}
h1
{
display:block;
color:red;
font-size:30px;
padding-left:4px;
width:100%;
padding-bottom:5pt;
padding-top:10pt;
border-top:maroon solid 1px;
border-bottom:maroon solid 2px;
}
h2
{
color:rgb(100,100,255);
font-size:20px;
width:85%;
border-top:rgb(200,200,255) solid 1px;
border-bottom:rgb(200,200,255) solid 2px;
}
h3
{
color:rgb(100,100,255);
font-size:16px;
width:40%;
margin-bottom:-14px;
border-top:rgb(200,200,255) solid 1px;
border-bottom:rgb(200,200,255) solid 2px;
}
.tblCol{background-color:rgb(220,220,220);}
.rLink{background-color:rgb(230,230,230);}
a{text-decoration:none; font-weight:bold; color:green;}
a:hover{text-decoration:none; color:yellow; background:black;}
.roll:hover{text-decoration:none; color:yellow; background:black;}
.largetype{font-size:28px;}
.medtype{font-size:17px;}
.smalltype{font-size:12px;}
.ltext{text-align:left;}
.ctext{text-align:center;}
.rtext{text-align:right;}
</style>
</head>
<body onload="OnLoad()">
<center>
<!--You can put your own header here instead of spaces. For example: Your company logo-->
<br><br><br><br><br><br><br><br>
<table class="tblCol"><tr>
<th colspan="2" id="tHead" style="color:red; font-size:23px; font-weight:bold;"></th>
</tr><tr>
<td id="sCodeTitle">Status Code: </td><td id="sCode"></td>
</tr><tr>
<td id="urlTitle">Page Requested: </td><td id="url"></td>
</tr><tr>
<td class="rLink"><a id="lTime1"><div>Refreshing in: </div></a></td><td class="rLink"><a id="lTime2"><div id="rTime"></div></a></td>
</tr><tr>
<td colspan="2"><div><a href="javascript:history.go(-1)">GO BACK</a></div></td>
</tr></table>
<!--You can put your own footer here-->
</center>
</body></html>
<script type="text/javascript">
var url="";
var timeLeft= 20;
var el_rTime= document.getElementById('rTime');
function RefreshPageCallback()
{
--timeLeft;
el_rTime.innerHTML= timeLeft;
if(timeLeft==0)
window.location.href= url;
}
function OnLoad()
{
var qp=new GETQueryParser(window.location.search);
var sCode= qp.getValue('status_code');
url= qp.getValue('url');
var showDesc= qp.getValue('show_desc');
var showCode= qp.getValue('show_code');
var showUrl= qp.getValue('show_url');
var el_tHead= document.getElementById('tHead');
var el_rTime= document.getElementById('rTime');
var el_lTime1= document.getElementById('lTime1');
var el_lTime2= document.getElementById('lTime2');
if(!url.length)
{
el_tHead.innerHTML= "ERROR on THIS Error Page!<br>URL is empty.<br>Check to make sure that active content is allowed.";
return;
}
el_lTime1.href= url;
el_lTime2.href= url;
el_rTime.innerHTML= timeLeft;
if(showDesc=='1' || showDesc=="")
{
var startM= 'Sorry,<br>';
if(sCode==404)
{
el_tHead.innerHTML= startM+'the page could not be found';
}
else if(sCode==403)
{
el_tHead.innerHTML= startM+'access denied';
}
else if(sCode==204)
{
el_tHead.innerHTML= startM+'the page is empty';
}
else if(sCode==400)
{
el_tHead.innerHTML= startM+'bad page request';
}
else if(sCode==408)
{
el_tHead.innerHTML= startM+'the request timed out<br>Please try again';
}
else if(sCode==503)
{
el_tHead.innerHTML= startM+'the kiosk is very busy right now<br>Please try again';
}
else
{
el_tHead.innerHTML= startM+'an error has occured<br>Please try again';
}
}
else
{
el_tHead.innerHTML='This page is temporarily down';
}
if(showCode=='1' || showCode=="")
{
document.getElementById('sCode').innerHTML= sCode;
}
else
{
document.getElementById('sCodeTitle').innerHTML='';
}
if(showUrl=='1' || showUrl=="")
{
document.getElementById('url').innerHTML= url;
}
else
{
document.getElementById('urlTitle').innerHTML='';
}
setInterval("RefreshPageCallback()", 1000);
}
function ToSafeHtml(s)
{
var sz= s.length;
var str="";
var c;
for(var i= 0; i < sz; ++i)
{
c= s.charAt(i);
if(c=='&')
{
str+='&';
}
else if(c=='<')
{
str+='<';
}
else if(c==='>')
{
str+='>';
}
else if(c==="\"")
{
str+='"';
}
else if(c==='\'')
{
str+=''';
}
else str+=c;
}
return str;
}
function GETQueryParser(queryStr)
{
var q= queryStr;
if(q.length > 1)
q= q.substring(1);
else
q= "";
//IE 6 may escape twice
//have to unescape here and below in this case
if(q.indexOf("&")==-1)
{
q= unescape(q);
}
this.ArgsArr=new Array();
if(q)
this.ArgsArr= q.split("&");
this.getValue = function(s)
{
var v=new Array();
for(var j=0; j < this.ArgsArr.length; j++)
{
v= this.ArgsArr[j].split("=");
if(v[0] == s)
//unescape strips off %hex - not all characters are unescaped though, such as double quotes
//ToSafeHtml makes it displayable
return ToSafeHtml(unescape(v[1]));
}
return "";
}
}
</script>