forked from jpillora/xhook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (118 loc) · 3.92 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
<!DOCTYPE HTML>
<html>
<head>
<title>XHR Hook Examples</title>
<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="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="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="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://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) {
set(code);
});
})
.val(initEg)
.trigger('change');
$("button").click(function() {
window.location.href = url;
});
})();
</script>
</body>
</html>