/
parent.html
126 lines (104 loc) · 4.07 KB
/
parent.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
The 'parent' frame is really the guy who kicks off this dance.
He'll do the following to demonstrate the basic functioning
of jschannel:
1. load the jschannel.js messaging abstraction
2. create an iframe holding child.html
3. establish a communication channel with the child
4. send a query, invoking the 'reverse' function of the child
on some parameters
5. interact a little bit more with the child to get a feel for how
everything works.
all sorts stuff, including the inputs and outputs to our functions
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> JSChannel Examples </title>
<style type="text/css" media="screen">
#body {
font-family: georgia, 'bitstream vera serif', serif;
}
.output {
font-family: 'lucida console', monaco, 'andale mono', 'bitstream vera sans mono', consolas, monospace;
font-size: 80%;
border : 1px dashed grey;
padding: 10px;
margin-bottom: 20px;
}
</style>
<!-- note, a debug version is also available to us, that would validate
all sorts stuff, including the inputs and outputs to our functions -->
<script src="../src/jschannel.js"></script>
</head>
<body>
<h2> JSChannel example </h2>
<p>
Welcome to the JSChannel example page. View source and you'll get an idea
of how you can get richer messaging semantics outta HTML5 cross document
messaging (a.k.a., window.postMessage) using this little javascript library.
</p>
First, here is basic function invocation:
<div class="output" id="output1"></div>
Next, here's error handling:
<div class="output" id="output2"></div>
Next, here's notification output:
<div class="output" id="output3"></div>
Finally, here's callback invocation output:
<div class="output" id="output4"></div>
<iframe style="display: none;" id="childId" src="child.html"></iframe>
</body>
<script>
function docLog(which, m) {
var tag = 'output' + which.toString();
m = "> " + m;
var e = document.createElement('div');
if (typeof e.innerText !== 'undefined') e.innerText = m;
else e.textContent = m;
document.getElementById(tag).appendChild(e);
}
var chan = Channel.build({
debugOutput: true,
window: document.getElementById("childId").contentWindow,
origin: "*",
scope: "testScope"
});
// first let's run a basic invocation
docLog(1, "invoking reverse method with args 'hello world!'");
chan.call({
method: "reverse",
params: "hello world!",
success: function(v) {
docLog(1, "function returns: '" + v + "'" );
}
});
// let's screw up the arguments and see what happens
docLog(2, "invoking reverse method again, now with bogus arguments");
chan.call({
method: "reverse",
params: ["this is not a string"],
error: function(error, message) { docLog(2, "ERROR: " + error + " (" + message + ")"); },
success: function(v) { docLog(2, "function returns: '" + v + "'" ); }
});
// now let's make the child send us a notification. She exports a single function
// that will invoke a notification with the method 'notify'
// step 1 is to bind a function to listen for the notification
chan.bind("notify", function(t, s) { docLog(3, "got notification: " + s); });
// step 2, invoke the function on our child which will cause him to send us a notification
chan.call({method: "sendNotification", success: function() { } });
// finally, let's explore the 'callback' mechanism, which allows callbacks to be passed
// *as arguments*, and the recipient may invoke these callbacks any number of times before
// the completion of the function call.
chan.call({
method: "charify",
params: {
gotChar: function(c) { docLog(4, "gotChar callback invoked: '" + c + "'"); },
startParse: function() { docLog(4, "word charification has begun!"); },
parseComplete: function() { docLog(4, "word charification has completed!"); },
word: "appelicious"
},
success: function(v) { docLog(4, "charify all done!" ); }
});
</script>
</html>