html2dom/index.html at master · freddyb/html2dom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/xhtml;charset=utf-8" />
        <title></title>
        <script src="js/html2dom.js"></script>
        <script src="js/main.js"></script>
        <style>
          #domjs, #resulthtml, #html {width:100%;height:175px;overflow-y:scroll}
          iframe#iframe {display:none; width:100%; overflow-y:scroll;}
          .tutorial { font-style: italic; font-size: small; display:none;}
        </style>
    </head>
<body>
<button onclick="tutorial()">Tutorial</button>
<span class="tutorial">&nbsp;Modify or enter some custom HTML below.</span>
<hr/>
<textarea id="html"></textarea>
<button onclick="parseHTML()" title="generates JS code from your HTML mark-up">html2dom&blacktriangledown;</button>
<span class="tutorial">&nbsp;Generate DOM methods that would generate the given HTML source code..</span>
<hr/>
<textarea id="domjs"></textarea>
<button onclick="evalParsedHTML()" title="generate HTML code by calling eval()">try executing the html2dom result&blacktriangledown;</button>
<span class="tutorial">&nbsp;View the HTML that would result from executing the JavaScript code from above.</span>
<hr/>
<textarea id="resulthtml"></textarea>
<button onclick="viewHTML()" title="render our generated HTML">preview HTML&blacktriangledown;</button>
<button onclick="compareNodes()" title="check if our JS generated HTML that looks like yours">compare input/result HTML&diams;</button>
<br>
<span class="tutorial">&nbsp;Preview the the HTML from above (images and styles are likely broken if URLs were relative or compare if the both HTML source code are the same.</span><br>

<hr/>
<iframe id="iframe" src="data:text/html;charset=utf-8,<div id='container'></div>" sandbox="allow-same-origin"></iframe>

<script>
"use strict";
var html = document.getElementById('html');
var domjs = document.getElementById('domjs');
var iframe = document.getElementById('iframe');
var resulthtml = document.getElementById('resulthtml');


html.value = location.hash.length > 1 ? unescape(location.hash.slice(1)) : '';
location.hash = '';

var updateCanvas = function(e){
  if(e && e.keyCode && (e.keyCode == 27 || e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40 || e.keyCode == 35 || e.keyCode == 35)) {
    return false;
    // this halts on arrow-key presses and escape and so on,
    // added 36,35 i.e., home/end keys
  }
  // saving state via url...
  location.hash = html.value; // a little document.write() backup
};
html.onkeyup = updateCanvas;
window.onload = updateCanvas;
</script>

</body>
</html>