1 |
<!DOCTYPE HTML> |
<!DOCTYPE HTML> |
2 |
<html lang=en> |
<html lang=en> |
3 |
<head> |
<head> |
4 |
<title>Demo of HTML5 Parsing Algorithm with Scripting Enabled</title> |
<title>Live Scripting HTML Parser</title> |
5 |
|
<link rel=author href="http://suika.fam.cx/~wakaba/who?"> |
6 |
|
<link rel=license href="http://suika.fam.cx/c/gnu/gpl" |
7 |
|
title="GNU GPL2 or later"> |
8 |
<style> |
<style> |
9 |
|
h1 { |
10 |
|
margin: 0; |
11 |
|
font-size: 150%; |
12 |
|
} |
13 |
|
h2 { |
14 |
|
margin: 0; |
15 |
|
font-size: 100%; |
16 |
|
} |
17 |
|
p { |
18 |
|
margin: 0 1em; |
19 |
|
} |
20 |
textarea { |
textarea { |
21 |
display: block; |
width: 100%; |
22 |
width: 80%; |
-width: 99%; |
23 |
margin-left: auto; |
height: 10em; |
|
margin-right: auto; |
|
|
min-height: 20em; |
|
24 |
} |
} |
25 |
output { |
output { |
26 |
display: block; |
display: block; |
30 |
} |
} |
31 |
</style> |
</style> |
32 |
<script> |
<script> |
33 |
|
var delayedUpdater = 0; |
34 |
|
|
35 |
function update () { |
function update () { |
36 |
document.logElement.textContent = ''; |
if (delayedUpdater) { |
37 |
var p = new Parser (new InputStream (document.sourceElement.value)); |
clearTimeout (delayedUpdater); |
38 |
var doc = p.doc; |
delayedUpdater = 0; |
39 |
p.parse (); |
} |
40 |
log (dumpTree (doc, '')); |
delayedUpdater = setTimeout (update2, 100); |
41 |
} // update |
} // update |
42 |
|
|
43 |
|
function update2 () { |
44 |
|
var v = document.sourceElement.value; |
45 |
|
if (v != document.previousSourceText) { |
46 |
|
document.previousSourceText = v; |
47 |
|
document.links['permalink'].href |
48 |
|
= location.pathname + '?s=' + encodeURIComponent (v); |
49 |
|
document.links['ldvlink'].href |
50 |
|
= 'http://software.hixie.ch/utilities/js/live-dom-viewer/?' |
51 |
|
+ encodeURIComponent (v); |
52 |
|
|
53 |
|
document.logElement.textContent = ''; |
54 |
|
var p = new Parser (new InputStream (v)); |
55 |
|
var doc = p.doc; |
56 |
|
p.parse (); |
57 |
|
|
58 |
|
log (dumpTree (doc, '')); |
59 |
|
|
60 |
|
if (p.hasAsyncScript) { |
61 |
|
log ('Some script codes are executed asynchronously; it means that the document might be rendered in different ways depending on the network condition and other factors'); |
62 |
|
} |
63 |
|
} |
64 |
|
} // update2 |
65 |
|
|
66 |
|
var logIndentLevel = 0; |
67 |
function log (s) { |
function log (s) { |
68 |
|
var indent = ''; |
69 |
|
for (var i = 0; i < logIndentLevel; i++) { |
70 |
|
indent += ' '; |
71 |
|
} |
72 |
|
s = indent + s.replace (/\n/g, "\n" + indent); |
73 |
document.logElement.appendChild (document.createTextNode (s + "\n")); |
document.logElement.appendChild (document.createTextNode (s + "\n")); |
74 |
} // log |
} // log |
75 |
|
|
83 |
doc = new JSDocument (this); |
doc = new JSDocument (this); |
84 |
doc.manakaiIsHTML = true; |
doc.manakaiIsHTML = true; |
85 |
} |
} |
86 |
|
this.nextToken = []; |
87 |
this.doc = doc; |
this.doc = doc; |
88 |
this.openElements = [doc]; |
this.openElements = [doc]; |
89 |
this.in = i; |
this.input = i; |
90 |
this.scriptsExecutedAfterParsing = []; |
this.scriptsExecutedAfterParsing = []; |
91 |
|
this.scriptsExecutedSoon = []; |
92 |
|
this.scriptsExecutedAsynchronously = []; |
93 |
} // Parser |
} // Parser |
94 |
|
|
95 |
Parser.prototype.getNextToken = function () { |
Parser.prototype.getNextToken = function () { |
96 |
|
if (this.nextToken.length) { |
97 |
|
return this.nextToken.shift (); |
98 |
|
} |
99 |
|
|
100 |
var p = this; |
var p = this; |
101 |
var i = this.in; |
var i = this.input; |
102 |
if (this.parseMode == 'script') { |
if (this.parseMode == 'cdata') { |
103 |
|
var tagName = this.endTagName; |
104 |
var token; |
var token; |
105 |
if (p.insertionPoint <= 0) { |
if (p.insertionPoint <= 0) { |
106 |
return {type: 'abort'}; |
return {type: 'abort'}; |
118 |
return ''; |
return ''; |
119 |
}); |
}); |
120 |
if (token) return token; |
if (token) return token; |
121 |
i.s = i.s.replace (/^<\/[Ss][Cc][Rr][Ii][Pp][Tt]>/, function (s) { |
var pattern = new RegExp ('^</' + tagName + '>', 'i'); |
122 |
|
i.s = i.s.replace (pattern, function (s) { |
123 |
if (p.insertionPoint < s.length) { |
if (p.insertionPoint < s.length) { |
124 |
token = {type: 'abort'}; |
token = {type: 'abort'}; |
125 |
return s; |
return s; |
126 |
} |
} |
127 |
token = {type: 'end-tag', value: 'script'}; |
token = {type: 'end-tag', value: tagName}; |
128 |
p.insertionPoint -= s.length; |
p.insertionPoint -= s.length; |
129 |
return ''; |
return ''; |
130 |
}); |
}); |
131 |
if (token) return token; |
if (token) return token; |
132 |
|
var m; |
133 |
|
if ((p.insertionPoint < ('</' + tagName).length) && |
134 |
|
(m = i.s.match (/^<\/([A-Za-z]+)/))) { |
135 |
|
var v = m[1].substring (0, p.insertionPoint).toLowerCase (); |
136 |
|
if (v == tagName.substring (0, p.insertionPoint - '</'.length)) { |
137 |
|
return {type: 'abort'}; |
138 |
|
} |
139 |
|
} |
140 |
i.s = i.s.replace (/^</, |
i.s = i.s.replace (/^</, |
141 |
function (s) { |
function (s) { |
142 |
token = {type: 'char', value: s}; |
token = {type: 'char', value: s}; |
148 |
} |
} |
149 |
|
|
150 |
var token; |
var token; |
151 |
i.s = i.s.replace (/^<\/([^>]+)>/, function (s, e) { |
i.s = i.s.replace (/^<\/([^>]+)(?:>|$)/, function (s, e) { |
152 |
if (p.insertionPoint < s.length) { |
if (p.insertionPoint < s.length || |
153 |
|
(p.insertionPoint <= s.length && |
154 |
|
s.substring (s.length - 1, s.length) != '>')) { |
155 |
token = {type: 'abort'}; |
token = {type: 'abort'}; |
156 |
return s; |
return s; |
157 |
} |
} |
160 |
return ''; |
return ''; |
161 |
}); |
}); |
162 |
if (token) return token; |
if (token) return token; |
163 |
i.s = i.s.replace (/^<([^>]+)>/, function (s, e) { |
i.s = i.s.replace (/^<([^>]+)(?:>|$)/, function (s, e) { |
164 |
if (p.insertionPoint < s.length) { |
if (p.insertionPoint < s.length || |
165 |
|
(p.insertionPoint <= s.length && |
166 |
|
s.substring (s.length - 1, s.length) != '>')) { |
167 |
token = {type: 'abort'}; |
token = {type: 'abort'}; |
168 |
return s; |
return s; |
169 |
} |
} |
173 |
tagName = v.toLowerCase (); |
tagName = v.toLowerCase (); |
174 |
return ''; |
return ''; |
175 |
}); |
}); |
176 |
e = e.replace (/^\s*(\S+)\s*(?:=\s*"([^"]*)"|'([^']*)'|([^"']+))?/, |
while (true) { |
177 |
function (x, attrName, attrValue1, attrValue2, attrValue3) { |
var m = false; |
178 |
attrs[attrName] = attrValue1 || attrValue2 || attrValue3; |
e = e.replace (/^\s*([^\s=]+)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|([^"'\s]*)))?/, |
179 |
return ''; |
function (x, attrName, attrValue1, attrValue2, attrValue3) { |
180 |
}); |
v = attrValue1 || attrValue2 || attrValue3; |
181 |
|
v = v.replace (/"/g, '"').replace (/'/g, "'") |
182 |
|
.replace (/&/g, '&'); |
183 |
|
attrs[attrName.toLowerCase ()] = v; |
184 |
|
m = true; |
185 |
|
return ''; |
186 |
|
}); |
187 |
|
if (!m) break; |
188 |
|
} |
189 |
|
if (e.length) { |
190 |
|
log ('Broken start tag: "' + e + '"'); |
191 |
|
} |
192 |
token = {type: 'start-tag', value: tagName, attrs: attrs}; |
token = {type: 'start-tag', value: tagName, attrs: attrs}; |
193 |
p.insertionPoint -= s.length; |
p.insertionPoint -= s.length; |
194 |
return ''; |
return ''; |
219 |
} // getNextToken |
} // getNextToken |
220 |
|
|
221 |
Parser.prototype.parse = function () { |
Parser.prototype.parse = function () { |
222 |
log ('start parsing'); |
logIndentLevel++; |
223 |
|
log ('parse: start'); |
224 |
|
|
225 |
while (true) { |
while (true) { |
226 |
var token = this.getNextToken (); |
var token = this.getNextToken (); |
227 |
log ('token: ' + token.type + ' "' + token.value + '"'); |
log ('token: ' + token.type + ' "' + token.value + '"'); |
228 |
|
|
229 |
|
if (this.cdataEndTagRequired) { |
230 |
|
// Generic CDATA parsing algorithm |
231 |
|
|
232 |
|
if (token.type != 'abort') { |
233 |
|
// 7. |
234 |
|
if (token.type == 'end-tag' && token.value == this.endTagName) { |
235 |
|
// 7.1. Ignores it. |
236 |
|
// |
237 |
|
} else { |
238 |
|
// 7.2. Parse error. |
239 |
|
log ('Parse error: no </' + this.endTagName + '>'); |
240 |
|
this.nextToken.unshift (token); |
241 |
|
} |
242 |
|
this.cdataEndTagRequired = false; |
243 |
|
continue; |
244 |
|
} |
245 |
|
} |
246 |
|
|
247 |
if (token.type == 'start-tag') { |
if (token.type == 'start-tag') { |
248 |
if (token.value == 'script') { |
if (token.value == 'script') { |
249 |
// 1. Create an element for the token in the HTML namespace. |
// 1. Create an element for the token in the HTML namespace. |
256 |
el.manakaiParserInserted = true; |
el.manakaiParserInserted = true; |
257 |
|
|
258 |
// 3. Switch the tokeniser's content model flag to the CDATA state. |
// 3. Switch the tokeniser's content model flag to the CDATA state. |
259 |
this.parseMode = 'script'; |
this.parseMode = 'cdata'; |
260 |
|
this.endTagName = 'script'; |
261 |
|
|
262 |
// 4.1. Collect all the character tokens. |
// 4.1. Collect all the character tokens. |
263 |
while (true) { |
while (true) { |
271 |
// 4.2. Until it returns a token that is not a character token, or |
// 4.2. Until it returns a token that is not a character token, or |
272 |
// until it stops tokenising. |
// until it stops tokenising. |
273 |
} else if (token.type == 'eof' || |
} else if (token.type == 'eof' || |
274 |
(token.type == 'end-tag' && token.value == 'script') || |
token.type == 'end-tag' || |
275 |
token.type == 'abort') { |
token.type == 'abort') { |
276 |
// 6. Switched back to the PCDATA state. |
// 6. Switched back to the PCDATA state. |
277 |
this.parseMode = 'pcdata'; |
this.parseMode = 'pcdata'; |
278 |
|
|
279 |
// 7.1. If the next token is not an end tag token with ... |
// 7.1. If the next token is not an end tag token with ... |
280 |
if (token.type != 'end-tag') { |
if (!(token.type == 'end-tag' && token.value == 'script')) { |
281 |
// 7.2. This is a parse error. |
// 7.2. This is a parse error. |
282 |
log ('Parse error: no </' + 'script>'); |
log ('Parse error: no </' + 'script>'); |
283 |
|
this.nextToken.unshift (token); |
284 |
|
|
285 |
// 7.3. Mark the script element as "already executed". |
// 7.3. Mark the script element as "already executed". |
286 |
el.manakaiAlreadyExecuted = true; |
el.manakaiAlreadyExecuted = true; |
295 |
// 8.1. If the parser were originally created for the ... |
// 8.1. If the parser were originally created for the ... |
296 |
if (this.fragmentParsingMode) { |
if (this.fragmentParsingMode) { |
297 |
// 8.2. Mark the script element as "already executed" and ... |
// 8.2. Mark the script element as "already executed" and ... |
298 |
el.alreadyExecuted = true; |
el.manakaiAlreadyExecuted = true; |
299 |
continue; |
continue; |
300 |
} |
} |
301 |
|
|
308 |
this.openElements[this.openElements.length - 1].appendChild (el); |
this.openElements[this.openElements.length - 1].appendChild (el); |
309 |
|
|
310 |
// 11. Let the insertion point have the value of the old ... |
// 11. Let the insertion point have the value of the old ... |
311 |
|
|
312 |
|
oldInsertionPoint += this.insertionPoint; |
313 |
this.setInsertionPoint (oldInsertionPoint); |
this.setInsertionPoint (oldInsertionPoint); |
314 |
|
|
315 |
// 12. If there is a script that will execute as soon as ... |
// 12. If there is a pending external script |
316 |
|
while (this.pendingExternalScript) { |
317 |
|
// 12.1. If the tree construction stage is being called reentrantly |
318 |
|
if (this.reentrant) { |
319 |
|
log ('parse: abort (reentrance)'); |
320 |
|
logIndentLevel--; |
321 |
|
return; |
322 |
|
|
323 |
|
// 12.2. Otherwise |
324 |
|
} else { |
325 |
|
// 1. |
326 |
|
var script = this.pendingExternalScript; |
327 |
|
this.pendingExternalScript = null; |
328 |
|
|
329 |
|
// 2. Pause until the script has completed loading. |
330 |
|
// |
331 |
|
|
332 |
|
// 3. Let the insertion point to just before the next input char. |
333 |
|
this.setInsertionPoint (0); |
334 |
|
|
335 |
|
// 4. Execute the script. |
336 |
|
executeScript (this.doc, script); |
337 |
|
|
338 |
|
// 5. Let the insertion point be undefined again. |
339 |
|
this.setInsertionPoint (undefined); |
340 |
|
|
341 |
|
// 6. If there is once again a script that will execute ... |
342 |
|
// |
343 |
|
} |
344 |
|
} |
345 |
|
} else if (token.value == 'style' || |
346 |
|
token.value == 'noscript' || |
347 |
|
token.value == 'xmp') { |
348 |
|
// 1. Create an element for the token in the HTML namespace. |
349 |
|
var el = new JSElement (this.doc, token.value); |
350 |
|
|
351 |
|
// 2. Append the new element to the current node. |
352 |
|
this.openElements[this.openElements.length - 1].appendChild (el); |
353 |
|
|
354 |
|
// 3. Switch the tokeniser's content model flag to the CDATA state. |
355 |
|
this.parseMode = 'cdata'; |
356 |
|
this.endTagName = token.value; |
357 |
|
|
358 |
|
// 4.1. Collect all the character tokens. |
359 |
|
while (true) { |
360 |
|
var token = this.getNextToken (); |
361 |
|
log ('token: ' + token.type + ' "' + token.value + '"'); |
362 |
|
|
363 |
|
if (token.type == 'char') { |
364 |
|
// 5. Append a single Text node to the script element node. |
365 |
|
el.manakaiAppendText (token.value); |
366 |
|
|
367 |
|
// 4.2. Until it returns a token that is not a character token, or |
368 |
|
// until it stops tokenising. |
369 |
|
} else if (token.type == 'eof' || |
370 |
|
token.type == 'end-tag' || |
371 |
|
token.type == 'abort') { |
372 |
|
// 6. Switched back to the PCDATA state. |
373 |
|
this.parseMode = 'pcdata'; |
374 |
|
|
375 |
|
if (token.type == 'abort') { |
376 |
|
this.cdataEndTagRequired = true; |
377 |
|
break; |
378 |
|
} |
379 |
|
|
380 |
|
// 7.1. If the next token is not an end tag token with ... |
381 |
|
if (!(token.type == 'end-tag' && |
382 |
|
token.value == this.endTagName)) { |
383 |
|
// 7.2. This is a parse error. |
384 |
|
log ('Parse error: no </' + this.endTagName + '>'); |
385 |
|
this.nextToken.unshift (token); |
386 |
|
|
387 |
|
// 7.3. Mark the script element as "already executed". |
388 |
|
el.manakaiAlreadyExecuted = true; |
389 |
|
} else { |
390 |
|
// 7.4. Ignore it. |
391 |
|
// |
392 |
|
} |
393 |
|
break; |
394 |
|
} |
395 |
|
} |
396 |
} else { |
} else { |
397 |
var el = new JSElement (this.doc, token.value); |
var el = new JSElement (this.doc, token.value); |
398 |
this.openElements[this.openElements.length - 1].appendChild (el); |
this.openElements[this.openElements.length - 1].appendChild (el); |
412 |
break; |
break; |
413 |
} else if (token.type == 'abort') { |
} else if (token.type == 'abort') { |
414 |
log ('parse: abort'); |
log ('parse: abort'); |
415 |
|
logIndentLevel--; |
416 |
return; |
return; |
417 |
} |
} |
418 |
} |
} |
423 |
|
|
424 |
// "When a script completes loading" rules start applying. |
// "When a script completes loading" rules start applying. |
425 |
|
|
426 |
// TODO: Handles "list of scripts that will execute as soon as possible" |
while (this.scriptsExecutedSoon.length > 0 || |
427 |
// and "list of scripts that will execute asynchronously" |
this.scriptsExecutedAsynchronously.length > 0) { |
428 |
|
// Handle "list of scripts that will execute as soon as possible". |
429 |
|
while (this.scriptsExecutedSoon.length > 0) { |
430 |
|
var e = this.scriptsExecutedSoon.shift (); |
431 |
|
|
432 |
|
// If it has completed loading |
433 |
|
log ('Execute an external script not inserted by parser...'); |
434 |
|
executeScript (this.doc, e); |
435 |
|
|
436 |
|
// NOTE: It MAY be executed before the end of the parsing, according |
437 |
|
// to the spec. |
438 |
|
this.hasAsyncScript = true; |
439 |
|
} |
440 |
|
|
441 |
|
// Handle "list of scripts that will execute asynchronously". |
442 |
|
while (this.scriptsExecutedAsynchronously.length > 0) { |
443 |
|
var e = this.scriptsExecutedAsynchronously.shift (); |
444 |
|
|
445 |
|
// Step 1. |
446 |
|
// We assume that all scripts have been loaded at this time. |
447 |
|
|
448 |
|
// Step 2. |
449 |
|
log ('Execute an asynchronous script...'); |
450 |
|
executeScript (this.doc, e); |
451 |
|
|
452 |
|
// Step 3. |
453 |
|
// |
454 |
|
|
455 |
|
// Step 4. |
456 |
|
// |
457 |
|
|
458 |
|
this.hasAsyncScript = true; |
459 |
|
} |
460 |
|
} |
461 |
|
|
462 |
// Handle "list of scripts that will execute when the document has finished |
// Handle "list of scripts that will execute when the document has finished |
463 |
// parsing". |
// parsing". |
477 |
|
|
478 |
log ('DOMContentLoaded event fired'); |
log ('DOMContentLoaded event fired'); |
479 |
|
|
480 |
// "delays tha load event" things has completed: |
// "delays the load event" things has completed: |
481 |
// readyState = 'complete' |
// readyState = 'complete' |
482 |
log ('load event fired'); |
log ('load event fired'); |
483 |
|
|
484 |
|
logIndentLevel--; |
485 |
} // parse |
} // parse |
486 |
|
|
487 |
Parser.prototype.setInsertionPoint = function (ip) { |
Parser.prototype.setInsertionPoint = function (ip) { |
488 |
if (ip == undefined || ip == null || isNaN (ip)) { |
if (ip == undefined || ip == null || isNaN (ip)) { |
489 |
log ('insertion point: set to undefined'); |
log ('insertion point: set to undefined'); |
490 |
this.insertionPoint = undefined; |
this.insertionPoint = undefined; |
491 |
} else if (ip == this.in.s.length) { |
} else if (ip == this.input.s.length) { |
492 |
log ('insertion point: end of file'); |
log ('insertion point: end of file'); |
493 |
this.insertionPoint = ip; |
this.insertionPoint = ip; |
494 |
} else { |
} else { |
495 |
log ('insertion point: set to ' + ip + |
log ('insertion point: set to ' + ip + |
496 |
' (before "' + this.in.s.substring (0, 10) + '")'); |
' (before "' + this.input.s.substring (0, 10) + '")'); |
497 |
this.insertionPoint = ip; |
this.insertionPoint = ip; |
498 |
} |
} |
499 |
}; // setInsertionPoint |
}; // setInsertionPoint |
515 |
e.parentNode = this; |
e.parentNode = this; |
516 |
|
|
517 |
if (e.localName == 'script') { |
if (e.localName == 'script') { |
518 |
|
logIndentLevel++; |
519 |
log ('Running a script: start'); |
log ('Running a script: start'); |
520 |
|
|
521 |
var doc = this.ownerDocument || this; |
var doc = this.ownerDocument || this; |
522 |
var p = doc._parser; |
var p = doc._parser; |
523 |
|
|
524 |
// 1. Script type |
// 1.The script's type |
525 |
|
// |
526 |
|
|
527 |
|
// 2. The cript's character encoding |
528 |
// |
// |
529 |
|
|
530 |
// 2.1. If scripting is disabled |
// 3.1. If without script |
531 |
// |
// |
532 |
// 2.2. If the script element was created by an XML ... innerHTML ... |
// 2.2. If the script element was created by an XML ... innerHTML ... |
533 |
// |
// |
534 |
// 2.3. If the user agent does not support the scripting language ... |
// 2.3. If the user agent does not support the scripting language ... |
535 |
// |
// |
536 |
// 2.4. If the script element has its "already executed" flag set |
if (false) { |
|
if (e.manakaiAlreadyExecuted) { |
|
537 |
// 2.5. Abort these steps at this point. |
// 2.5. Abort these steps at this point. |
538 |
log ('Running a script: aborted'); |
log ('Running a script: aborted (noscript)'); |
539 |
|
logIndentLevel--; |
540 |
return e; |
return e; |
541 |
} |
} |
542 |
|
|
543 |
// 3. Set the element's "already executed" flag. |
// 4. Set the element's "already executed" flag. |
544 |
e.manakaiAlreadyExecuted = true; |
e.manakaiAlreadyExecuted = true; |
545 |
|
|
546 |
// 4. If the element has a src attribute, then a load for ... |
// 5. If the element has a src attribute, then a load for ... |
547 |
// TODO: load an external resource |
// TODO: load an external resource |
548 |
|
|
549 |
// 5. The first of the following options: |
// 5. The first of the following options: |
550 |
|
|
|
// 5.1. |
|
551 |
if (/* TODO: If the document is still being parsed && */ |
if (/* TODO: If the document is still being parsed && */ |
552 |
e.defer && !e.async) { |
e.defer && !e.async) { |
553 |
|
// 6.1. |
554 |
p.scriptsExecutedAfterParsing.push (e); |
p.scriptsExecutedAfterParsing.push (e); |
555 |
log ('Running a script: aborted (defer)'); |
log ('Running a script: aborted (defer)'); |
556 |
} else if (e.async && e.src != null) { |
} else if (e.async && e.src != null) { |
557 |
// TODO |
// 6.2. |
558 |
} else if (e.async && e.src == null |
p.scriptsExecutedAsynchronously.push (e); |
559 |
/* && list of scripts that will execute asynchronously is not empty */) { |
log ('Running a script: aborted (async src)'); |
560 |
// TODO |
} else if (e.async && e.src == null && |
561 |
|
p.scriptsExecutedAsynchronously.length > 0) { |
562 |
|
// 6.3. |
563 |
|
p.scriptsExecutedAsynchronously.push (e); |
564 |
|
log ('Running a script: aborted (async)'); |
565 |
} else if (e.src != null && e.manakaiParserInserted) { |
} else if (e.src != null && e.manakaiParserInserted) { |
566 |
// TODO |
// 6.4. |
567 |
|
if (p.pendingExternalScript) { |
568 |
|
log ('Error: There is a pending external script.'); |
569 |
|
} |
570 |
|
p.pendingExternalScript = e; |
571 |
|
log ('Running a script: aborted (src parser-inserted)'); |
572 |
} else if (e.src != null) { |
} else if (e.src != null) { |
573 |
// TODO |
// 6.5. |
574 |
|
p.scriptsExecutedSoon.push (e); |
575 |
|
log ('Running a script: aborted (src)'); |
576 |
} else { |
} else { |
577 |
|
// 6.6. |
578 |
executeScript (doc, e); // even if other scripts are already executing. |
executeScript (doc, e); // even if other scripts are already executing. |
579 |
} |
} |
580 |
|
|
581 |
log ('Running a script: end'); |
log ('Running a script: end'); |
582 |
|
logIndentLevel--; |
583 |
} |
} |
584 |
|
|
585 |
return e; |
return e; |
588 |
function executeScript (doc, e) { |
function executeScript (doc, e) { |
589 |
log ('executing a script block: start'); |
log ('executing a script block: start'); |
590 |
|
|
591 |
// If the load resulted in an error, then ... firing an error event ... |
var s; |
592 |
|
if (e.src != null) { |
593 |
|
s = getExternalScript (e.src); |
594 |
|
|
595 |
|
// If the load resulted in an error, then ... firing an error event ... |
596 |
|
if (s == null) { |
597 |
|
log ('error event fired at the script element'); |
598 |
|
return; |
599 |
|
} |
600 |
|
|
601 |
|
log ('External script loaded: "' + s + '"'); |
602 |
|
} else { |
603 |
|
s = e.text; |
604 |
|
} |
605 |
|
|
606 |
// If the load was successful |
// If the load was successful |
|
log ('load event fired at the script element'); |
|
607 |
|
|
608 |
if (true) { |
if (true) { |
609 |
// Scripting is enabled, Document.designMode is disabled, |
// Scripting is enabled, Document.designMode is disabled, |
610 |
// Document is the active document in its browsing context |
// Document is the active document in its browsing context |
611 |
|
|
|
var s; |
|
|
if (e.src != null) { |
|
|
// TODO: from external file |
|
|
} else { |
|
|
s = e.text; |
|
|
} |
|
|
|
|
612 |
parseAndRunScript (doc, s); |
parseAndRunScript (doc, s); |
613 |
} |
} |
614 |
|
|
615 |
|
log ('load event fired at the script element'); |
616 |
|
|
617 |
log ('executing a script block: end'); |
log ('executing a script block: end'); |
618 |
} // executeScript |
} // executeScript |
619 |
|
|
620 |
|
function getExternalScript (uri) { |
621 |
|
if (uri.match (/^javascript:/i)) { |
622 |
|
var m; |
623 |
|
if (m = uri.match (/^javascript:\s*(?:'([^']*)'|"([^"]+)")\s*$/i)) { |
624 |
|
if (m[1]) { |
625 |
|
return unescapeJSLiteral (m[1]); |
626 |
|
} else if (m[2]) { |
627 |
|
return unescapeJSLiteral (m[2]); |
628 |
|
} else { |
629 |
|
return null; |
630 |
|
} |
631 |
|
} else { |
632 |
|
log ('Complex javascript: URI is not supported: <' + uri + '>'); |
633 |
|
return null; |
634 |
|
} |
635 |
|
} else { |
636 |
|
log ('URI scheme not supported: <' + uri + '>'); |
637 |
|
return null; |
638 |
|
} |
639 |
|
} // getExternalScript |
640 |
|
|
641 |
function parseAndRunScript (doc, s) { |
function parseAndRunScript (doc, s) { |
642 |
while (true) { |
while (true) { |
643 |
var matched = false; |
var matched = false; |
645 |
matched = true; |
matched = true; |
646 |
var args = []; |
var args = []; |
647 |
t.replace (/('[^']*'|"[^"]*")/g, function (s, v) { |
t.replace (/('[^']*'|"[^"]*")/g, function (s, v) { |
648 |
args.push (v.substring (1, v.length - 1)); |
args.push (unescapeJSLiteral (v.substring (1, v.length - 1))); |
649 |
return ''; |
return ''; |
650 |
}); |
}); |
651 |
doc.write.apply (doc, args); |
doc.write.apply (doc, args); |
652 |
return ''; |
return ''; |
653 |
}); |
}); |
654 |
|
var noDocumentElement = false; |
655 |
|
s = s.replace (/^\s*var\s+s\s*=\s*document\.createElement\s*\(\s*['"]script['"]\s*\)\s*;\s*s\.src\s*=\s*(?:'([^']*)'|"([^"]*)")\s*;\s*document\.documentElement\.appendChild\s*\(\s*s\s*\)\s*;\s*/, |
656 |
|
function (s, t, u) { |
657 |
|
matched = true; |
658 |
|
var args = [unescapeJSLiteral (t ? t : u)]; |
659 |
|
noDocumentElement = !doc._insertExternalScript.apply (doc, args); |
660 |
|
return ''; |
661 |
|
}); |
662 |
|
if (noDocumentElement) { |
663 |
|
log ('Script error: documentElement is null'); |
664 |
|
break; |
665 |
|
} |
666 |
|
s = s.replace (/^\s*w\s*\(\s*document\.documentElement\.innerHTML\s*\)\s*;\s*/, |
667 |
|
function (s, t) { |
668 |
|
matched = true; |
669 |
|
log (dumpTree (doc, '')); |
670 |
|
return ''; |
671 |
|
}); |
672 |
if (s == '') break; |
if (s == '') break; |
673 |
if (!matched) { |
if (!matched) { |
674 |
log ('Script parse error: "' + s + '"'); |
log ('Script parse error: "' + s + '"'); |
677 |
} |
} |
678 |
} // parseAndRunScript |
} // parseAndRunScript |
679 |
|
|
680 |
|
function unescapeJSLiteral (s) { |
681 |
|
return s.replace (/\\u([0-9A-Fa-f]{4})/g, function (t, v) { |
682 |
|
return String.fromCharCode (parseInt ('0x' + v)); |
683 |
|
}); |
684 |
|
} // unescapeJSLiteral |
685 |
|
|
686 |
function JSText (data) { |
function JSText (data) { |
687 |
this.data = data; |
this.data = data; |
688 |
} // JSText |
} // JSText |
710 |
// Step 3. |
// Step 3. |
711 |
if (this._parser && |
if (this._parser && |
712 |
!this._parser.scriptCreated && |
!this._parser.scriptCreated && |
713 |
this._parser.in.insertionPoint != undefined) { |
this._parser.input.insertionPoint != undefined) { |
714 |
log ('document.open () in parsing mode is ignored'); |
log ('document.open () in parsing mode is ignored'); |
715 |
return this; |
return this; |
716 |
} |
} |
744 |
} |
} |
745 |
|
|
746 |
// Step 11. |
// Step 11. |
747 |
this._parser.setInsertionPoint (this._parser.in.s.length); |
this._parser.setInsertionPoint (this._parser.input.s.length); |
748 |
|
|
749 |
// Step 12. |
// Step 12. |
750 |
return this; |
return this; |
751 |
}; // document.open |
}; // document.open |
752 |
|
|
753 |
JSDocument.prototype.write = function () { |
JSDocument.prototype.write = function () { |
754 |
|
log ('document.write: start'); |
755 |
|
logIndentLevel++; |
756 |
|
|
757 |
var p = this._parser; |
var p = this._parser; |
758 |
|
|
759 |
// 1. If the insertion point is undefined, the open() method must be ... |
// 1. If the insertion point is undefined, the open() method must be ... |
765 |
// 2. ... inserted into the input stream just before the insertion point. |
// 2. ... inserted into the input stream just before the insertion point. |
766 |
var s = Array.join (arguments, ''); |
var s = Array.join (arguments, ''); |
767 |
log ('document.write: insert "' + s + '"' + |
log ('document.write: insert "' + s + '"' + |
768 |
' before "' + p.in.s.substring (p.insertionPoint, p.insertionPoint + 10) + '"'); |
' before "' + |
769 |
p.in.s = p.in.s.substring (0, p.insertionPoint) + s |
p.input.s.substring (p.insertionPoint, p.insertionPoint + 10) + '"'); |
770 |
+ p.in.s.substring (p.insertionPoint, p.in.s.length); |
p.input.s = p.input.s.substring (0, p.insertionPoint) + s |
771 |
|
+ p.input.s.substring (p.insertionPoint, p.input.s.length); |
772 |
p.insertionPoint += s.length; |
p.insertionPoint += s.length; |
773 |
|
|
774 |
// 3. If there is a script that will execute as soon as the parser resumes |
// 3. If there is a pending external script |
775 |
// TODO |
if (p.pendingExternalScript) { |
776 |
|
log ('document.write: processed later (there is an unprocessed <script src>)'); |
777 |
|
logIndentLevel--; |
778 |
|
log ('document.write: return'); |
779 |
|
return; |
780 |
|
} |
781 |
|
|
782 |
// 4. Process the characters that were inserted, ... |
// 4. Process the characters that were inserted, ... |
783 |
|
var originalReentrant = p.reentrant; |
784 |
|
p.reentrant = true; |
785 |
p.parse (); |
p.parse (); |
786 |
|
p.reentrant = originalReentrant; |
787 |
|
// TODO: "Abort the processing of any nested invokations of the tokeniser, |
788 |
|
// yielding control back to the caller." (<script> parsing). Do we need |
789 |
|
// to do something here? |
790 |
|
|
791 |
// 5. Return |
// 5. Return |
792 |
|
logIndentLevel--; |
793 |
log ('document.write: return'); |
log ('document.write: return'); |
794 |
|
|
795 |
return; |
return; |
796 |
}; // document.write |
}; // document.write |
797 |
|
|
798 |
|
JSDocument.prototype._insertExternalScript = function (uri) { |
799 |
|
var s = new JSElement (this, 'script'); |
800 |
|
s.src = uri; |
801 |
|
if (this.documentElement) { |
802 |
|
this.documentElement.appendChild (s); |
803 |
|
return true; |
804 |
|
} else { |
805 |
|
return false; |
806 |
|
} |
807 |
|
}; // _insertExternalScript |
808 |
|
|
809 |
|
JSDocument.prototype.__defineGetter__ ('documentElement', function () { |
810 |
|
var cn = this.childNodes; |
811 |
|
for (var i = 0; i < cn.length; i++) { |
812 |
|
if (cn[i] instanceof JSElement) { |
813 |
|
return cn[i] |
814 |
|
} |
815 |
|
} |
816 |
|
return null; |
817 |
|
}); |
818 |
|
|
819 |
JSElement.prototype.__defineGetter__ ('text', function () { |
JSElement.prototype.__defineGetter__ ('text', function () { |
820 |
var r = ''; |
var r = ''; |
821 |
for (var i = 0; i < this.childNodes.length; i++) { |
for (var i = 0; i < this.childNodes.length; i++) { |
834 |
r += '| ' + indent + node.localName + '\n'; |
r += '| ' + indent + node.localName + '\n'; |
835 |
if (node.async) r += '| ' + indent + ' async=""\n'; |
if (node.async) r += '| ' + indent + ' async=""\n'; |
836 |
if (node.defer) r += '| ' + indent + ' defer=""\n'; |
if (node.defer) r += '| ' + indent + ' defer=""\n'; |
837 |
if (node.src) r += '| ' + indent + ' src="' + node.src + '"\n'; |
if (node.src != null) { |
838 |
|
r += '| ' + indent + ' src="' + node.src + '"\n'; |
839 |
|
} |
840 |
r += dumpTree (node, indent + ' '); |
r += dumpTree (node, indent + ' '); |
841 |
} else if (node instanceof JSText) { |
} else if (node instanceof JSText) { |
842 |
r += '| ' + indent + '"' + node.data + '"\n'; |
r += '| ' + indent + '"' + node.data + '"\n'; |
850 |
</head> |
</head> |
851 |
<body onload=" |
<body onload=" |
852 |
document.sourceElement = document.getElementsByTagName ('textarea')[0]; |
document.sourceElement = document.getElementsByTagName ('textarea')[0]; |
853 |
|
|
854 |
|
var q = location.search; |
855 |
|
if (q != null) { |
856 |
|
q = q.substring (1).split (/;/); |
857 |
|
for (var i = 0; i < q.length; i++) { |
858 |
|
var v = q[i].split (/=/, 2); |
859 |
|
v[0] = decodeURIComponent (v[0]); |
860 |
|
v[1] = decodeURIComponent (v[1] || ''); |
861 |
|
if (v[0] == 's') { |
862 |
|
document.sourceElement.value = v[1]; |
863 |
|
} |
864 |
|
} |
865 |
|
} |
866 |
|
|
867 |
document.logElement = document.getElementsByTagName ('output')[0]; |
document.logElement = document.getElementsByTagName ('output')[0]; |
868 |
update (); |
update (); |
869 |
"> |
"> |
870 |
|
<h1>Live Scripting <abbr title="Hypertext Markup Language">HTML</abbr> |
871 |
|
Parser</h1> |
872 |
|
|
873 |
<textarea onchange=" update () "><html> |
<h2>Markup to test |
874 |
|
(<a href=data:, id=permalink rel=bookmark>permalink</a>, |
875 |
|
<a href="http://software.hixie.ch/utilities/js/live-dom-viewer/" |
876 |
|
id=ldvlink>Live <abbr title="Document Object Model">DOM</abbr> |
877 |
|
Viewer</a>)</h2> |
878 |
|
<p> |
879 |
|
<textarea onkeydown=" update () " onchange=" update () " oninput=" update () "><html> |
880 |
<head></head><body> |
<head></head><body> |
881 |
<p> |
<p> |
882 |
<script> |
<script> |
885 |
<p> |
<p> |
886 |
</textarea> |
</textarea> |
887 |
|
|
888 |
<output></output> |
<h2 id=log>Log</h2> |
889 |
|
<p><output></output> |
890 |
|
|
891 |
|
<h2 id=notes>Notes</h2> |
892 |
|
|
893 |
|
<p>This is a <em>simplified</em> implementation of <a |
894 |
|
href="http://www.whatwg.org/specs/web-apps/current-work/#parsing">HTML5 |
895 |
|
Parsing Algorithm</a> (revision 2138). It only implements |
896 |
|
scripting-related parts of the algorithm. Especially, this parser: |
897 |
|
|
898 |
|
<ul> |
899 |
|
<li>Does not support <code>DOCTYPE</code> and comment tokens. |
900 |
|
<li>Does not support entities except for <code>&quot;</code>, |
901 |
|
<code>&apos;</code>, and <code>&amp;</code> in <code>script</code> |
902 |
|
<code>src</code> attribute value. |
903 |
|
<li>Does not support omissions of start or end tags, the <abbr>AAA</abbr> |
904 |
|
algorithm, and so on. |
905 |
|
<li>Does not raise parse errors for invalid attribute specifications in start |
906 |
|
or end tags. |
907 |
|
<li>Does not support RCDATA elements (<code>title</code> and |
908 |
|
<code>textarea</code>). |
909 |
|
<li>Does not strip the first newline in <code>pre</code>, |
910 |
|
<code>listing</code>, and <code>textarea</code> elements. |
911 |
|
<li>Does not support <code><!--</code>..<code>--></code> parsing rule |
912 |
|
in CDATA/RCDATA elements. |
913 |
|
<li>Does not support foreign (SVG or MathML) elements. |
914 |
|
<li>Only supports <code>script</code> <code>type</code> |
915 |
|
<code>text/javascript</code>. <code>type</code> and <code>language</code> |
916 |
|
attributes are ignored. |
917 |
|
<li>Only supports limited statements. It must consist of zero or more |
918 |
|
of statements looking similar to the following statements, possibly |
919 |
|
introduced, followed, or separated by white space characters: |
920 |
|
<ul> |
921 |
|
<li><code>document.write ("<var>string</var>", ["<var>string</var>", ...]);</code>. |
922 |
|
<li><code>var s = document.createElement ("script"); |
923 |
|
s.src = "<var>string</var>"; |
924 |
|
document.documentElement.appendChild (s);</code> |
925 |
|
<li><code>w (document.documentElement.innerHTML);</code> (This statement |
926 |
|
can be used to dump the document, even when the document has no |
927 |
|
document element. The output format is the tree dump format used |
928 |
|
in html5lib test data, not <abbr>HTML</abbr>.) |
929 |
|
</ul> |
930 |
|
Note that strings may be delimited by <code>'</code>s instead of |
931 |
|
<code>"</code>s. |
932 |
|
<li>Only supports <code>javascript:</code> |
933 |
|
<abbr title="Uniform Resourace Identifiers">URI</abbr> scheme in the |
934 |
|
<code>src</code> attribute of the <code>script</code> element. In addition, |
935 |
|
the <abbr title="Uniform Resource Identifiers">URI</abbr> must be conform to |
936 |
|
the regular expression <code>^javascript:\s*(?:"[^"]*"|'[^']*')\s*$</code>. |
937 |
|
<li>Only supports <code>\u<var>HHHH</var></code> escapes in JavaScript |
938 |
|
string literals. |
939 |
|
<li>Does not handle <i>stop parsing</i> phase correctly if the document is |
940 |
|
replaced by <code>document.open ()</code> call. In other word, delayed |
941 |
|
(deferred or asynchronous) script executions and event firings might be |
942 |
|
treated in a wrong way if a <code>document.open ()</code> invocation |
943 |
|
is implicitly done by <code>document.write ()</code> in a delayed script. |
944 |
|
</ul> |
945 |
|
|
946 |
|
<p>For some reason, this parser does not work in browsers that do |
947 |
|
not support JavaScript 1.5. |
948 |
|
|
949 |
|
<!-- TODO: |src| attribute value should refer the value at the time |
950 |
|
when it is inserted into the document, not the value when the script is |
951 |
|
executed. Currently it does not matter, since we don't allow dynamic |
952 |
|
modification to the |src| content/DOM attribute value yet. --> |
953 |
|
|
954 |
|
<p>See also |
955 |
|
<a href="http://suika.fam.cx/gate/2005/sw/Live%20Scripting%20HTML%20Parser">SuikaWiki: |
956 |
|
Live Scripting HTML Parser</a>. |
957 |
|
|
958 |
</body> |
</body> |
|
</html> |
|
959 |
|
</html> |
960 |
|
<!-- $Date$ --> |
961 |
|
<!-- |
962 |
|
|
963 |
|
Copyright 2008 Wakaba <w@suika.fam.cx> |
964 |
|
|
965 |
|
This program is free software; you can redistribute it and/or |
966 |
|
modify it under the terms of the GNU General Public License |
967 |
|
as published by the Free Software Foundation; either version 2 |
968 |
|
of the License, or (at your option) any later version. |
969 |
|
|
970 |
|
This program is distributed in the hope that it will be useful, |
971 |
|
but WITHOUT ANY WARRANTY; without even the implied warranty of |
972 |
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
973 |
|
GNU General Public License for more details. |
974 |
|
|
975 |
|
You should have received a copy of the GNU General Public License |
976 |
|
along with this program; if not, write to the Free Software |
977 |
|
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
978 |
|
|
979 |
|
--> |