forked from cweb/url-testing
-
Notifications
You must be signed in to change notification settings - Fork 0
/
url-liveview.html
134 lines (124 loc) · 4.99 KB
/
url-liveview.html
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<head>
<title>Live DOM URL Viewer</title>
<meta name="author" content="Chris Weber">
<meta name="copyright" content="© 2013 Chris Weber">
<meta name="description" content="Web browser test page for
URL parsing">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript"
src="js/url.js"></script>
</head>
<h2>Enter a URL to parse:</h2>
<p>The output below will display a URL's parsed components from both the
browser's DOM, and from the <a href="https://github.com/annevk/url">URL.js
project</a> being done for the <a
href="http://url.spec.whatwg.org/">WHATWG URL spec.</a> The output will
be colored <span class="pass">dark green</span> unless a difference occurs between the two parsers in
which case the affected URL component will be colored <span
class="fail">red</span>.</p>
<input type="text" value="http://example.com" class="input" id="url"
onkeyup="parse(this.value)">
<a href="" id="target"></a>
<h2>URL components from DOM properties:</h2>
<div class="output">
<span class="title">href</span><span class="result" id="domHref"></span><br
/>
<span class="title">hash</span><span class="result" id="domHash"></span><br
/>
<span class="title">hostname</span><span class="result"
id="domHostname"></span><br />
<span class="title">pathname</span><span class="result"
id="domPathname"></span><br />
<span class="title">port</span><span class="result" id="domPort"></span><br
/>
<span class="title">protocol</span><span class="result"
id="domProtocol"></span><br />
<span class="title">search</span><span class="result"
id="domSearch"></span><br />
</div>
<h2>URL components from URL.js:</h2>
<div class="output">
<span class="title">href</span><span class="result" id="urlHref"></span><br
/>
<span class="title">hash</span><span class="result" id="urlHash"></span><br
/>
<span class="title">hostname</span><span class="result"
id="urlHostname"></span><br />
<span class="title">pathname</span><span class="result"
id="urlPathname"></span><br />
<span class="title">port</span><span class="result" id="urlPort"></span><br
/>
<span class="title">protocol</span><span class="result"
id="urlProtocol"></span><br />
<span class="title">search</span><span class="result"
id="urlSearch"></span><br />
</div>
<script>
// Prepare the elements to output DOM properties
var domHref = document.getElementById("domHref");
var domHash = document.getElementById("domHash");
var domHostname = document.getElementById("domHostname");
var domPathname = document.getElementById("domPathname");
var domPort = document.getElementById("domPort");
var domProtocol = document.getElementById("domProtocol");
var domSearch = document.getElementById("domSearch");
// Prepare the elements to output URL class properties from URL.js
var urlHref = document.getElementById("urlHref");
var urlHash = document.getElementById("urlHash");
var urlHostname = document.getElementById("urlHostname");
var urlPathname = document.getElementById("urlPathname");
var urlPort = document.getElementById("urlPort");
var urlProtocol = document.getElementById("urlProtocol");
var urlSearch = document.getElementById("urlSearch");
function parse(input) {
parseDom(input);
parseUrl(input);
compare(urlHref, domHref);
compare(urlHash, domHash);
compare(urlHostname, domHostname);
compare(urlPathname, domPathname);
compare(urlPort, domPort);
compare(urlProtocol, domProtocol);
compare(urlSearch, domSearch);
}
function parseDom(input) {
var target = document.getElementById("target");
target.setAttribute("href", input);
domHref.textContent = target.href;
domHash.textContent = target.hash;
domHostname.textContent = target.hostname;
domPathname.textContent = target.pathname;
domPort.textContent = target.port;
domProtocol.textContent = target.protocol;
domSearch.textContent = target.search;
}
function parseUrl(input) {
var base = document.baseURI;
var url = new URL(input, base);
urlHref.textContent = url.href;
urlHash.textContent = url.hash;
urlHostname.textContent = url.hostname;
urlPathname.textContent = url.pathname;
urlPort.textContent = url.port;
urlProtocol.textContent = url.protocol;
urlSearch.textContent = url.search;
}
function compare(x, y) {
if (x.textContent != y.textContent) {
x.className = "fail";
y.className = "fail";
}
else {
x.className = "pass";
y.className = "pass";
}
}
function color(element1, element2, color) {
element1.style.color = color;
element2.style.color = color;
}
</script>
</html>