-
Notifications
You must be signed in to change notification settings - Fork 44
/
Copy pathindex.html
189 lines (180 loc) · 7.41 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Seamless.js | Beautiful, seamless iframes.</title>
<link rel="stylesheet" href="css/foundation.css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-450670-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="build/seamless.parent.js"></script>
<script type="text/javascript">
window.onload = function() {
// Define the child pages.
var child1 = document.getElementById('childpage1');
var child2 = document.getElementById('childpage2');
// Declare these iframes as seamless.
window.seamless(child1);
window.seamless(child2);
/**
* Send text to the child1 iframe.
*/
window.sendToChild = function(event) {
event.preventDefault();
child1.send({
type: 'setContent',
header: document.getElementById('sendtextcontent').value
});
};
/**
* Add an image to the child2 iframe.
*/
window.addImage = function(event) {
event.preventDefault();
child2.send({
type: 'setContent',
image: 'img/seamless.jpg'
});
};
/**
* Inject styles.
*/
window.injectStyles = function(event) {
event.preventDefault();
child2.send({
type: 'seamless_styles',
data: [document.getElementById('childstyles').value]
});
};
/**
* When they click the swap button.
*/
window.swapContent = function(event) {
event.preventDefault();
// Get the child1 content.
child1.send({
data: {type: 'getContent'},
success: function(data1) {
// Get the child2 content.
child2.send({
data: {type: 'getContent'},
success: function(data2) {
// Swap the contents.
child1.send({
type: 'setContent',
header: data2.header,
image: data2.image
});
child2.send({
type: 'setContent',
header: data1.header,
image: data1.image
});
}
});
}
});
};
};
</script>
</head>
<body>
<div class="row panel">
<h2 class="subheader">Beautiful, seamless iframes with seamless.js</h2>
<div class="large-8 columns">
<p>A <strong>seamless</strong> iframe makes it so that visitors are unable to distinguish between content within the iframe and content beside the iframe. <strong>Seamless.js</strong> is a JavaScript library that makes working with iframes easy by doing all the <strong>seamless</strong> stuff for you automatically.</p>
<p>Stuff like...</p>
<p><ul>
<li>Automatically adds 'seamless' attributes to an iframe.</li>
<li>Easy communication between parent page and iframe page.</li>
<li>Auto-resizing the iframe to fit the contents of the child page.</li>
<li>Loading indicator when the child page is loading.</li>
<li>Auto failsafe to open iframe in separate window in case of error.</li>
<li>Inject CSS styles into the child pages.</li>
<li>Easily manage multiple iframes on the same page.</li>
<li>Creates a fallback for child pages that block cross-origin cookies. (Safari)</li>
<li>Allow the child page to pop out of the parent page.</li>
</ul></p>
<p><a href="https://github.com/travist/seamless.js" class="button">Download on GitHub ❯❯</a></p>
</div>
<div class="large-4 columns">
<img src="img/seamless.jpg" />
</div>
</div>
<div class="row panel" style="padding: 10px 15px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- wide ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:970px;height:90px"
data-ad-client="ca-pub-1902035200208763"
data-ad-slot="5056380768"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="row panel iframe-example">
<div class="large-12 columns">
<h2 class="subheader">Example</h2>
<p>The iframes are denoted here by the thick dashed gray lines. The dashed border would not normally show, but are only here to show you where the iframes are located. Use the following buttons and inputs to test its functionality.</p>
<div class="large-5 columns">
<div class="small-12">
<input id="sendtextcontent" type="text" placeholder="Enter text to send to Child Page 1.">
</div>
<div class="small-12">
<a href="#" id="sendtext" onclick="sendToChild(event)" class="button postfix">Send to Child Page 1</a>
</div>
</div>
<div class="large-5 columns">
<div class="row">
<a href="#" id="addimage" onclick="addImage(event)" class="large-8 button expand">Add an image to Child Page 2</a>
</div>
<div class="row">
<div class="small-12">
<input id="childstyles" type="text" value="div.content { background-color: #6e6; }" placeholder="Enter a style to inject in Child Page 2.">
</div>
<div class="small-12">
<a href="#" id="injectstyles" onclick="injectStyles(event)" class="button postfix">Inject Styles in Child Page 2</a>
</div>
</div>
</div>
</div>
<div class="large-5 columns">
<h4>Child Page 1</h4>
<iframe id="childpage1" src="child1.html"></iframe>
</div>
<div class="large-2 columns" style="margin-top: 40px;">
<h5>Swap Content</h5>
<a href="#" style="font-size: 20px;" id="swap" onclick="swapContent(event)" class="button large-12 columns">↔</a>
</div>
<div class="large-5 columns">
<h4>Child Page 2</h4>
<iframe id="childpage2" src="child2.html"></iframe>
</div>
</div>
<div class="row panel" style="padding: 10px 15px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- wide ad -->
<ins class="adsbygoogle"
style="display:inline-block;width:970px;height:90px"
data-ad-client="ca-pub-1902035200208763"
data-ad-slot="5056380768"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="row panel">
<div class="large-12 columns">
<h2 class="subheader">Documentation</h2>
<a href="https://github.com/travist/seamless.js" target="_blank" class="button">Go here for documentation ❯❯</a>
</div>
</div>
</body>
</html>