-
Notifications
You must be signed in to change notification settings - Fork 0
/
iframe.html
130 lines (110 loc) · 5.08 KB
/
iframe.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>iFrame API [iframe]</title>
<style type="text/css" rel="stylesheet">
* { margin: 0; padding: 0; border: none; outline: none; }
html { width: 100%; height: 100%; }
body { padding: 2%; width: 96%; font-family: sans-serif; background: #cdcdcd;}
h1 { margin-bottom: 20px; font-size: 24px; }
p { font-size: 13px; line-height: 18px; }
.image { width: 100%; height: auto; }
p.snippet { padding: 2%; border: 1px solid gray; font-size: 13px; }
button { margin-bottom: 40px; padding: 10px; font-size: 13px; font-weight: bold; color: darkslategray; cursor: pointer; background: transparent; border: 2px solid darkseagreen; }
button:hover { border-color: darkslategray; background: darkseagreen; }
</style>
<script>
var testIframe = {};
testIframe.windowHeight = 0;
testIframe.htmlElement = document.getElementsByTagName( 'html' )[0];
testIframe.targetDomain = document.referrer; // Or specific domain name string.
/* ---- DATA STRUCTURE --------------------------------------------------------- */
testIframe.demoData = {
namespace: 'IFAPP', // namespace to identify itself as a trusted task.
task: { // Task-Object to be computed in the parent window.
name: 'something', // Name of the task.
param: { // Task parameter(s) as key/value-pairs.
first: 'messageFromIframe'
}
}
};
/* ---- DATA STRUCTURE --------------------------------------------------------- */
testIframe.requestAnimFrame = ( function (){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
testIframe.resizeFrame = function (){
var _windowHeight = document.body ? document.body.offsetHeight : testIframe.htmlElement.offsetHeight ;
if ( testIframe.windowHeight === _windowHeight ) {
testIframe.requestAnimFrame.call( window, testIframe.resizeFrame );
return false;
}
testIframe.windowHeight = _windowHeight;
// Same Origin iFrame
try { window.frameElement.style.height = windowHeight + 'px'; }
// Cross Origin iFrame
catch ( e ) {
var _sendData = {
namespace: 'IFAPP',
task: {
name: 'resize',
param: {
height: _windowHeight
}
}
};
testIframe.postMessageToParent( _sendData );
}
testIframe.requestAnimFrame.call( window, testIframe.resizeFrame );
};
testIframe.postMessageToParent = function ( __sendData ) {
window.parent.postMessage(
JSON.stringify( __sendData ),
testIframe.targetDomain
);
};
testIframe.onWindowMessage = function ( __event ) {
var _message;
try { _message = JSON.parse( __event.data ); }
catch (__exception) { console.error( 'The given event data is not valid JSON:', __event.data ); }
if ( _message && _message.namespace === 'IFAPP' ) {
switch( _message.task.name ) {
case 'something':
testIframe.doSomething( _message.task );
break;
default:
console.error('Task "' + _message.task.name + '" not found.');
}
}
};
testIframe.postDemoMessageToParent = function () {
testIframe.postMessageToParent( testIframe.demoData );
};
testIframe.doSomething = function ( __task ) {
document.getElementById( 'msg' ).innerHTML = 'received: ' + __task.param.first;
};
testIframe.requestAnimFrame.call( window, testIframe.resizeFrame );
window.addEventListener( 'message', testIframe.onWindowMessage, false );
</script>
</head>
<body>
<h1>iFrame</h1>
<button onclick="testIframe.postDemoMessageToParent()">Post message to parent</button>
<p class="snippet" id="msg"></p>
<br><br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut inventore maiores repellendus exercitationem quaerat omnis porro blanditiis adipisci at quia reiciendis doloribus ducimus sed facere qui atque optio quae ad temporibus, laborum et dolore totam nisi ipsam!
</p>
<img src="http://lorempixel.com/400/200/cats/" class="image" alt="of course cats!" />
<p>
Dolor consectetur nam rerum maxime. Veritatis fugiat reiciendis numquam dolores, quas, laudantium praesentium qui aut ea minus non temporibus mollitia illo laborum doloremque ex, nostrum perspiciatis laboriosam id. At deserunt nam error nisi amet debitis maiores odit dolores architecto tempora fugit veniam aperiam molestias corrupti voluptas praesentium quos cupiditate quod, excepturi iure! Animi, illum placeat! Maxime, ipsam natus maiores, laudantium, deserunt quo modi quidem dolore sapiente optio velit earum quas deleniti nulla doloribus ad similique accusantium ipsum molestiae, voluptatem necessitatibus eius iusto quod?
</p>
</body>
</html>