charset/singlebyte/table.html

<!DOCTYPE HTML>
<head>
<style>
.match {
  background-color: green;
  color: white;
}
.not-match {
  background-color: red;
  color: white;
}
</style>
<body>

<p>Specify charste name as URI query like: <a href=table.html?iso-8859-1><code class=example>table.html?iso-8859-1</code></a>

<table>
<thead><tr><th>Original Byte<th>Result String
<tbody>
</table>

<iframe style=display:none src=dummy></iframe>

<script>
  var query = (location.search || '?').substring (1).split (/;/);
  var charset = decodeURIComponent (query[0] || '');
  var plain = query[1] == 'plain';
  var iframe = document.getElementsByTagName ('iframe')[0];
  var tbody = document.getElementsByTagName ('tbody')[0];
  var nextByte = -1;
  var lastTimer;
  var results = [];
  var timeoutError = true;

  var mappingTables = {};
  var mappingTableNames = ['ie7vista', 'safari31vista', 'opera92vista', 'fx2vista'];
  var theadtr = document.getElementsByTagName ('thead')[0].firstChild;
  for (var i = 0; i < mappingTableNames.length; i++) {
    readMappingTable (charset, mappingTableNames[i]);
    theadtr.appendChild (document.createElement ('th'))
        .appendChild (document.createTextNode (mappingTableNames[i]));
  }

  doNext ();

  function readMappingTable (charset, uaid) {
    var c = charset.replace (/[^A-Za-z0-9_-]/g, '_');
    var fileName = 'result/' + c + '-' + uaid + '.txt';
    var xhr = new XMLHttpRequest ();
    xhr.open ('GET', fileName, false);
    xhr.send (null);
    if (xhr.status < 400) {
      mappingTables[uaid] = xhr.responseText.split ('\n');
    }
  } // readMappingTable
  
  function doNext () {
    clearTimeout (lastTimer);
    timeoutError = false

    if (nextByte == -1) {
      if (document.all && !window.opera) {
        iframe.onreadystatechange = function () {
          if (this.readyState == 'complete') {
            doNext ();
          }
        };
      } else {
        iframe.onload = doNext;
      }
      nextByte++;
      iframe.src = 'about:blank';
    } else if (nextByte <= 0xFF) {
      if (document.all && !window.opera) {
        iframe.onreadystatechange = function () {
          if (this.readyState == 'complete') {
            addTableRow ();
          }
        };
      } else {
        iframe.onload = addTableRow;
      }
      lastTimer = setTimeout (function () {
        timeoutError = true;
        iframe.onload = null;
        iframe.onreadystatechange = null;
        addTableRow ();
      }, 5000);
      iframe.src = 'charset.cgi/' + encodeURIComponent (charset)
          + '?' + nextByte++ + (plain ? ';plain' : '');
    } else {
      iframe.onload = null;
      iframe.onreadystatechange = null;
      doLast ();
    }
  } // doNext

  function addTableRow () {
    var tr = document.createElement ('tr');

    tr.appendChild (document.createElement ('th'))
        .appendChild (document.createTextNode (getByteCode (nextByte - 1)));

    var td = tr.appendChild (document.createElement ('td'));
    var docbody = iframe.contentWindow.document.body;
    var value = timeoutError ? '' : docbody.firstChild ? docbody.firstChild.firstChild ? docbody.firstChild.firstChild.data : docbody.firstChild.data || '' : '';
    for (var i = 0; i < value.length; i++) {
      td.appendChild (document.createTextNode (getCharCode (value.charCodeAt (i)) + ' '));
    }
    results[nextByte - 1] = td.innerText || td.textContent;

    for (var i = 0; i < mappingTableNames.length; i++) {
      var tableid = mappingTableNames[i];
      var cell = tr.appendChild (document.createElement ('td'));
      var cellValue = '';
      if (mappingTables[tableid]) {
        cellValue = mappingTables[tableid][nextByte - 1];
        cell.appendChild (document.createTextNode (cellValue));
        if (cellValue != results[nextByte - 1]) {
          cell.className = 'not-match';
        } else {
          cell.className = 'match';
        }
      } else {
        cell.className = 'no-data';
      }
    }

    tbody.appendChild (tr);

    doNext ();
  } // addTableRow

  function doLast () {
    var ta = document.createElement ('textarea');
    ta.value = results.join ('\n');
    document.body.appendChild (ta);
  } // doLast

  function getByteCode (c) {
    var r = c.toString (16).toUpperCase ();
    if (r.length < 2) {
      r = '0' + r;
    }
    return '0x' + r;
  } // getByteCode

  function getCharCode (c) {
    var r = c.toString (16).toUpperCase ();
    if (r.length < 2) {
      r = '000' + r;
    } else if (r.length < 3) {
      r = '00' + r;
    } else if (r.length < 4) {
      r= '0' + r;
    }
    return 'U+' + r;
  } // getCharCode

</script>
1	<!DOCTYPE HTML>
2	<head>
3	<style>
4	.match {
5	background-color: green;
6	color: white;
7	}
8	.not-match {
9	background-color: red;
10	color: white;
11	}
12	</style>
13	<body>
14
15	<p>Specify charste name as URI query like: <a href=table.html?iso-8859-1><code class=example>table.html?iso-8859-1</code></a>
16
17	<table>
18	<thead><tr><th>Original Byte<th>Result String
19	<tbody>
20	</table>
21
22	<iframe style=display:none src=dummy></iframe>
23
24	<script>
25	var query = (location.search \|\| '?').substring (1).split (/;/);
26	var charset = decodeURIComponent (query[0] \|\| '');
27	var plain = query[1] == 'plain';
28	var iframe = document.getElementsByTagName ('iframe')[0];
29	var tbody = document.getElementsByTagName ('tbody')[0];
30	var nextByte = -1;
31	var lastTimer;
32	var results = [];
33	var timeoutError = true;
34
35	var mappingTables = {};
36	var mappingTableNames = ['ie7vista', 'safari31vista', 'opera92vista', 'fx2vista'];
37	var theadtr = document.getElementsByTagName ('thead')[0].firstChild;
38	for (var i = 0; i < mappingTableNames.length; i++) {
39	readMappingTable (charset, mappingTableNames[i]);
40	theadtr.appendChild (document.createElement ('th'))
41	.appendChild (document.createTextNode (mappingTableNames[i]));
42	}
43
44	doNext ();
45
46	function readMappingTable (charset, uaid) {
47	var c = charset.replace (/[^A-Za-z0-9_-]/g, '_');
48	var fileName = 'result/' + c + '-' + uaid + '.txt';
49	var xhr = new XMLHttpRequest ();
50	xhr.open ('GET', fileName, false);
51	xhr.send (null);
52	if (xhr.status < 400) {
53	mappingTables[uaid] = xhr.responseText.split ('\n');
54	}
55	} // readMappingTable
56
57	function doNext () {
58	clearTimeout (lastTimer);
59	timeoutError = false
60
61	if (nextByte == -1) {
62	if (document.all && !window.opera) {
63	iframe.onreadystatechange = function () {
64	if (this.readyState == 'complete') {
65	doNext ();
66	}
67	};
68	} else {
69	iframe.onload = doNext;
70	}
71	nextByte++;
72	iframe.src = 'about:blank';
73	} else if (nextByte <= 0xFF) {
74	if (document.all && !window.opera) {
75	iframe.onreadystatechange = function () {
76	if (this.readyState == 'complete') {
77	addTableRow ();
78	}
79	};
80	} else {
81	iframe.onload = addTableRow;
82	}
83	lastTimer = setTimeout (function () {
84	timeoutError = true;
85	iframe.onload = null;
86	iframe.onreadystatechange = null;
87	addTableRow ();
88	}, 5000);
89	iframe.src = 'charset.cgi/' + encodeURIComponent (charset)
90	+ '?' + nextByte++ + (plain ? ';plain' : '');
91	} else {
92	iframe.onload = null;
93	iframe.onreadystatechange = null;
94	doLast ();
95	}
96	} // doNext
97
98	function addTableRow () {
99	var tr = document.createElement ('tr');
100
101	tr.appendChild (document.createElement ('th'))
102	.appendChild (document.createTextNode (getByteCode (nextByte - 1)));
103
104	var td = tr.appendChild (document.createElement ('td'));
105	var docbody = iframe.contentWindow.document.body;
106	var value = timeoutError ? '' : docbody.firstChild ? docbody.firstChild.firstChild ? docbody.firstChild.firstChild.data : docbody.firstChild.data \|\| '' : '';
107	for (var i = 0; i < value.length; i++) {
108	td.appendChild (document.createTextNode (getCharCode (value.charCodeAt (i)) + ' '));
109	}
110	results[nextByte - 1] = td.innerText \|\| td.textContent;
111
112	for (var i = 0; i < mappingTableNames.length; i++) {
113	var tableid = mappingTableNames[i];
114	var cell = tr.appendChild (document.createElement ('td'));
115	var cellValue = '';
116	if (mappingTables[tableid]) {
117	cellValue = mappingTables[tableid][nextByte - 1];
118	cell.appendChild (document.createTextNode (cellValue));
119	if (cellValue != results[nextByte - 1]) {
120	cell.className = 'not-match';
121	} else {
122	cell.className = 'match';
123	}
124	} else {
125	cell.className = 'no-data';
126	}
127	}
128
129	tbody.appendChild (tr);
130
131	doNext ();
132	} // addTableRow
133
134	function doLast () {
135	var ta = document.createElement ('textarea');
136	ta.value = results.join ('\n');
137	document.body.appendChild (ta);
138	} // doLast
139
140	function getByteCode (c) {
141	var r = c.toString (16).toUpperCase ();
142	if (r.length < 2) {
143	r = '0' + r;
144	}
145	return '0x' + r;
146	} // getByteCode
147
148	function getCharCode (c) {
149	var r = c.toString (16).toUpperCase ();
150	if (r.length < 2) {
151	r = '000' + r;
152	} else if (r.length < 3) {
153	r = '00' + r;
154	} else if (r.length < 4) {
155	r= '0' + r;
156	}
157	return 'U+' + r;
158	} // getCharCode
159
160	</script>