forked from jpillora/xhook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (134 loc) · 4.82 KB
/
index.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE HTML>
<html>
<head>
<title>XHR Hook Examples</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-38709761-14', 'auto');
ga('send', 'pageview');
</script>
<style type="text/css">
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
iframe {
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 50%;
}
#ace, textarea {
position: absolute;
font-size: 12px;
left: 0;
top: 0;
height: 100%;
width: 50%;
overflow: scroll;
margin: 0;
padding: 0;
border-right: thin solid black;
}
#controls {
position: absolute;
right: 51%;
top: 5px;
z-index: 2;
text-align: right;
}
</style>
</head>
<body>
<a href="https://github.com/jpillora/xhook">
<img style="position: absolute; z-index: 2; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>
<div id="controls">
<select>
<option value="vanilla">With Vanilla</option>
<option value="vanilla-fetch">With Fetch</option>
<option value="fetch-form-data">With Fetch & FormData</option>
<option value="vanilla-both">Vanilla With Fetch</option>
<option value="xhr-webworker">With WebWorker</option>
<option value="fetch-webworker">With Fetch in WebWorker</option>
<option value="jquery">With jQuery</option>
<option value="angular">With Angular</option>
<option value="modify-headers">Modify Headers</option>
<option value="case-insensitive-headers">Case Insensitive Headers</option>
<option value="fake-response">Fake response</option>
<option value="modify-method-url">Modify Method and URL</option>
<option value="track-errors">Track Error Codes</option>
<option value="add-event-listener">Add Event Listeners</option>
<option value="progress-download-real">Real Download Events</option>
<option value="progress-download-fake">Fake Download Events</option>
<option value="progress-upload-real">Real Upload Events</option>
<option value="response-type">Response Type</option>
<option value="events">Events</option>
<option value="xhr-reuse">XHR Reuse</option>
<option value="vanilla-xml">Vanilla XML</option>
<!-- <option value="response-xml">XML Response</option> -->
<!-- <option value="progress-upload-fake">Fake Upload Events</option> -->
</select><br>
<button>Open</button>
</div>
<div id="ace"></div>
<textarea id="ta" readonly="readonly"></textarea>
<iframe frameborder="0"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function() {
if(/MSIE [678]/.test(window.navigator.userAgent)) {
$("#ace").remove();
var set = function(code) {
$("#ta").val(code);
}
var get = function() {
return $("#ta").val()
}
} else {
$("#ta").remove();
window.editor = ace.edit("ace");
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/html");
editor.session.setTabSize(2);
editor.session.setUseSoftTabs(true);
editor.setShowPrintMargin(false);
editor.setReadOnly(true);
var set = function(code) {
editor.session.setValue(code);
}
var get = function() {
return editor.session.getValue()
}
}
var url = null,
initEg = window.location.hash.substr(1) || 'vanilla';
$("select").change(function() {
var eg = $(this).find(':selected').val();
if(!eg) return;
window.location.hash = eg;
url = 'example/'+eg+'.html';
$("iframe").attr('src', url);
$.get(url).done(function(code) {
ga('send', 'event', 'load-example', eg);
set(code);
});
})
.val(initEg)
.trigger('change');
$("button").click(function() {
window.location.href = url;
});
})();
</script>
</body>
</html>