-
Notifications
You must be signed in to change notification settings - Fork 2
/
test_iframe.html
67 lines (66 loc) · 1.76 KB
/
test_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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>iFrame Canvas</title>
<style>
html,body{ height: 100%;}
</style>
</head>
<body id="home">
<svg id="stage" width="100%" height="100%">
</svg>
<script>
window.addEventListener('message', receiveMessage, false);
var stage = document.getElementById('stage');
function randint(max){
return Math.ceil(Math.random() * (max + 1) - 1);
}
function randx(){
return '' + randint(500);
}
function randy(){
return '' + randint(300);
}
function randradius(){
return '' + (randint(30) + 20);
}
function randcolor(){
return 'rgb(' + randint(255) + ', ' + randint(255) + ', ' + randint(255) + ')';
}
function elem(name, attr){
var e = document.createElementNS('http://www.w3.org/2000/svg', 'svg:' + name);
var attrNames = Object.keys(attr);
attrNames.forEach(function(key){
e.setAttribute(key, attr[key]);
});
return e;
}
function circle(){
stage.appendChild(elem('circle', {
cx: randx(),
cy: randy(),
r: randradius(),
fill: randcolor()
}))
}
function rect(){
stage.appendChild(elem('rect',{
x: randx(),
y: randy(),
width: randradius(),
height: randradius(),
fill: randcolor()
}));
}
function receiveMessage(evt){
console.log('message received: %s', evt);
switch(evt.data){
case 'circle': circle(); break;
case 'rect': rect(); break;
}
window.parent.postMessage('I made a ' + evt.data + ' all by myself!', '*');
}
</script>
</body>
</html>