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	wakaba	1.1	<!DOCTYPE HTML>
2	wakaba	1.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	wakaba	1.1	<body>
14
15	wakaba	1.3	<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	wakaba	1.1	<table>
18	wakaba	1.2	<thead><tr><th>Original Byte<th>Result String
19	wakaba	1.1	<tbody>
20			</table>
21
22	wakaba	1.2	<iframe style=display:none src=dummy></iframe>
23	wakaba	1.1
24			<script>
25	wakaba	1.2	var query = (location.search \|\| '?').substring (1).split (/;/);
26			var charset = decodeURIComponent (query[0] \|\| '');
27			var plain = query[1] == 'plain';
28	wakaba	1.1	var iframe = document.getElementsByTagName ('iframe')[0];
29			var tbody = document.getElementsByTagName ('tbody')[0];
30	wakaba	1.2	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	wakaba	1.1
44			doNext ();
45	wakaba	1.2
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	wakaba	1.1
57			function doNext () {
58	wakaba	1.2	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	wakaba	1.1	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	wakaba	1.2	lastTimer = setTimeout (function () {
84			timeoutError = true;
85			iframe.onload = null;
86			iframe.onreadystatechange = null;
87			addTableRow ();
88			}, 5000);
89	wakaba	1.1	iframe.src = 'charset.cgi/' + encodeURIComponent (charset)
90	wakaba	1.2	+ '?' + nextByte++ + (plain ? ';plain' : '');
91	wakaba	1.1	} else {
92			iframe.onload = null;
93			iframe.onreadystatechange = null;
94	wakaba	1.2	doLast ();
95	wakaba	1.1	}
96			} // doNext
97
98			function addTableRow () {
99			var tr = document.createElement ('tr');
100
101			tr.appendChild (document.createElement ('th'))
102	wakaba	1.2	.appendChild (document.createTextNode (getByteCode (nextByte - 1)));
103	wakaba	1.1
104			var td = tr.appendChild (document.createElement ('td'));
105			var docbody = iframe.contentWindow.document.body;
106	wakaba	1.2	var value = timeoutError ? '' : docbody.firstChild ? docbody.firstChild.firstChild ? docbody.firstChild.firstChild.data : docbody.firstChild.data \|\| '' : '';
107	wakaba	1.1	for (var i = 0; i < value.length; i++) {
108	wakaba	1.2	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	wakaba	1.1	}
128
129			tbody.appendChild (tr);
130
131			doNext ();
132			} // addTableRow
133	wakaba	1.2
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	wakaba	1.1	</script>