-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
245 lines (198 loc) · 8.84 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html><html><head><meta charset="UTF-8" /><script src="./boot.js"></script><link href="./decor/frameset.html" rel="frameset" /></head><body>
<div id="__main__" role="main"><h1>HyperFrameset</h1>
<blockquote>
<p>HyperFramesets are the way HTMLFramesets were meant to work -
super-stylesheets with seamless frames, document transforms and configurable routing. And history.pushState.</p>
</blockquote>
<p>HyperFrameset is a light-weight Javascript <a href="http://en.wikipedia.org/wiki/Transclusion">transclusion</a>
and layout engine which runs in the browser.
Whilst the implementation relies on AJAX and <code>history.pushState</code>,
conceptually the design is an evolution of HTMLFramesets.</p>
<p>The primary advance is that the landing page initiates loading of
the frameset document, not the other way round.
HyperFrameset is consistent with the principles of
<a href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive Enhancement</a> and
<a href="http://roca-style.org/" title="ROCA">Resource Oriented Client Architecture</a>.</p>
<p><strong>WARNING:</strong> THIS PROJECT IS ALPHA SOFTWARE. ONLY USE IT FOR EXPERIMENTATION.</p>
<h3>Browser support</h3>
<p>HyperFrameset requires features only available in recent versions of popular browsers,
but sites that adapt well to HyperFrameset will (probably)
have full functionality when HyperFrameset doesn't run.</p>
<p>HyperFrameset can run on browsers which support <code>history.pushState</code> and <code>MutationObserver</code>.
These are available on most browsers in significant use today.
Since <code>MutationObserver</code> is NOT supported on IE10, HyperFrameset uses <code>MutationEvents</code> on that platform. </p>
<h3>License</h3>
<p>HyperFrameset is available under
<a href="http://www.mozilla.org/MPL/2.0/" title="Mozilla Public License version 2.0">MPL 2.0</a>.
See the <a href="http://www.mozilla.org/MPL/2.0/FAQ.html" title="Frequently Asked Questions">MPL 2.0 FAQ</a>
for your obligations if you intend to modify or distribute HyperFrameset or part thereof. </p>
<h3>Contact</h3>
<p>If you have any questions or comments, don't hesitate to contact the author via
<a href="http://meekostuff.net/">web</a>, <a href="mailto:shogun70@gmail.com">email</a> or <a href="http://twitter.com/meekostuff">twitter</a>. </p>
<p><strong>WARNING:</strong> THIS DOCUMENTATION IS A WORK-IN-PROGRESS.
SOME OF IT MAY BE OUT-OF-DATE. MOSTLY IT IS JUST TOO LONG AND DISORGANISED.
A BETTER UNDERSTANDING WILL BE GAINED THROUGH EXPLORING A DEMO - VIEW SOURCE IS YOUR FRIEND.</p>
<h2>Installation</h2>
<ol>
<li><p>Copy or clone the HyperFrameset project files to a directory on your server, say </p>
<pre><code>/path/to/HyperFrameset/
</code></pre></li>
<li><p>Open a <strong>modern</strong> browser and navigate to the following page</p>
<pre><code>http://your.domain.com/path/to/HyperFrameset/test/normal.html
</code></pre>
<p>Visually inspect the displayed page for the following possible failures:</p>
<ul>
<li>boxes with <strong>red</strong> background or borders. </li>
<li>boxes that claim to be styled with colored borders but just have the default border. </li>
</ul></li>
<li><p>Source the HyperFrameset boot-script into your pages with this line in the <code><head></code> of each page </p>
<pre><code><script src="/path/to/HyperFrameset/boot.js"></script>
</code></pre>
<p>The boot-script </p>
<ul>
<li>MUST be in the <code><head></code> of the page</li>
<li>MUST NOT have <code>@async</code> or <code>@defer</code></li>
<li>SHOULD be before any stylesheets - <code><link rel="stylesheet" /></code> or <code><style></code></li>
</ul></li>
</ol>
<h2>Quick Start</h2>
<p><strong>TODO:</strong> A better quick start would be copying a demo site.</p>
<p>Create some HTML pages with some page specific content (page.html).
Any page specific scripts, styles or meta-data should go in <code><head></code>.
The <code><body></code> may also contain fallback content, which is
only displayed if HyperFrameset is NOT enabled.</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<!-- source the HyperFrameset boot-script -->
<script src="/path/to/HyperFrameset/boot.js"></script>
<title>Content</title>
<!-- create a link to the frameset document. All attributes are needed -->
<link rel="frameset" type="text/html" href="/frameset.html" />
<!-- include fallback stylesheets for when HyperFrameset doesn't run. -->
<style>
.styled-from-page { background-color: red; color: white; }
</style>
</head>
<body>
<header>
This fallback header will be removed from the page
</header>
<main><!-- Primary content -->
<h1>Page One<h1>
<div class="styled-from-frameset">
This content is styled by the frameset stylesheet
</div>
<div class="styled-from-page">
This content is styled by the page stylesheet which will not apply in the frameset view.
</div>
</main>
<footer>
This fallback footer will be removed from the page
</footer>
</body>
</html>
</code></pre>
<p>Create an index page (index.html).</p>
<pre><code><!DOCTYPE html>
<html>
<body>
<h1>Index page</h1>
<nav>
<a href="/page.html">Page One</a><br />
<a href="/page2.html">Page Two</a>
</nav>
</body>
</html>
</code></pre>
<p>Create the frameset document (frameset.html).
This is a normal page of HTML that, when viewed in the browser,
will appear as the final page without the page specific content. </p>
<pre><code><!DOCTYPE html>
<html>
<head>
<style>
.styled-from-frameset { border: 2px solid blue; }
</style>
<script for="hf-frameset">
({
lookup: function(url) { return 'hf_main'; } // the target for all same-scope hyperlinks
})
</script>
</head>
<body>
<header>
#header in frameset
</header>
<nav>
<label>Navigation</label>
<hf-frame targetname="hf_nav" type="html" src="scope:./index.html" main="nav">
<hf-body></hf-body>
</hf-frame>
</nav>
<main>
<label>Primary Content</label>
<hf-frame targetname="hf_main" type="html" main="main">
<hf-body"></hf-body>
</hf-frame>
</main>
<footer>
#footer in frameset
</footer>
</body>
</html>
</code></pre>
<p>When page.html is loaded into the browser, HyperFrameset will load frameset.html and apply it to the view,
inserting the <code><main></code> content from page.html into the <code>hf_main</code> frame,
and inserting the <code><nav></code> content from index.html into the <code>hf_nav</code> frame.</p>
<p>This process results in a DOM tree something like this:</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<!-- source the HyperFrameset boot-script -->
<script src="/path/to/HyperFrameset/boot.js"></script>
<!-- create a link to the frameset document. All attributes are needed -->
<link rel="frameset" type="text/html" href="/frameset.html" />
<title>Content</title>
<style>
.styled-from-frameset { border: 2px solid blue; }
</style>
<!-- NOTE: no page specific style -->
</head>
<body>
<header>
#header in frameset
</header>
<nav>
<label>Navigation</label>
<hf-frame targetname="hf_nav" type="html" src="/index.html" main="nav">
<hf-body>
<a href="/page.html">Page One</a><br />
<a href="/page2.html">Page Two</a>
</hf-body>
</hf-frame>
</nav>
<main>
<label>Primary Content</label>
<hf-frame targetname="hf_main" type="html" main="main">
<hf-body>
<h1>Page One<h1>
<div class="styled-from-frameset">
This content is styled by the frameset stylesheet
</div>
<div class="styled-from-page">
This content is styled by the page stylesheet which will not apply in the frameset view.
</div>
</hf-body>
</hf-frame>
</main>
<footer>
#footer in frameset
</footer>
</body>
</html>
</code></pre>
<h2>Documentation</h2>
<p><a href="doc/">For more details read the documentation</a></p>
</div>
</body></html>