Download
User Rating: 0/5 ( 0 votes)
Flyer.js is a lightweight messaging library written for clojurescript & javascript.
It provides broadcast messaging between frames, iframes, and windows.
Features and Operation
-
Simple API, from which you can build more elaborate messaging systems.
-
Messages are broadcasted to all frames and registered windows, regardless of whether or not they want them (hence, the name)
-
Frames can subscribe to specific channels, and can pattern-match to specific topics being sent on that channel
Source: github.com
1. INCLUDE JS FILES
<script type="text/javascript" src="./js/flyer.js"></script>
<script type="text/javascript" src="./js/flyer-wrapper.js"></script>
2. HTML
<div class="fill">
<div class="header">
<iframe seamless class="frame-fill" src="./frames/header-nav.html"></iframe>
</div>
<div class="content">
<iframe seamless id="main-content" class="frame-fill"
src="./frames/frame-home.html"></iframe>
</div>
</div>
3. JAVASCRIPT
/* Ties a protocol into flyer.js, to use between frames */
//very primitive button click functionality
function broadcast_click(clickName) {
flyer.broadcast({
channel: "demo",
topic: "button.clicked",
data: {clickName: clickName},
});
}
//subscriptiong to primitive button functionality
function subscribe_click(clickName, callback) {
flyer.subscribe({
channel: "demo",
topic: "button.clicked",
callback: function(data) {
if (data.clickName == clickName) {
callback(data);
}
}
});
}
var contentFrame = $("#main-content");
subscribe_click("home", function() {
contentFrame.attr("src", "frames/frame-home.html");
});
subscribe_click("external", function() {
contentFrame.attr("src", "frames/frame-external.html");
});
4. API
flyer.broadcast([Options])
if you aren’t using flyer-wrapper, use flyer.wrapper.broadcast instead
flyer.subscribe([Options])
if you aren’t using flyer-wrapper, use flyer.wrapper.subscribe instead
-
channel: the channel you wish to broadcast on. default is “*”, which stands for all channels
-
topic: the topic of your broadcast message. default is “*”, which stands for all topics
-
data: any JSON serializable object
-
target: determines what type of target domain is expected to receive this message. By default, the target is *’all’*, but it can be set to *’local’*, or a target domain of your choosing.
-
-
channel: the channel you wish to subscribe to. default is “*”, which stands for all channels
-
topic: the topic you wish to subscribe to. default is “*”, which stands for all topics. Note that this can also be a string representation of a regex expression.
-
callback: callback function of the form function(data, [topic],[channel]) that you wish to call when the subscription is made.
-
origin: refers to the origin, or domain from which the messages will be received. The default is all, but it can be set to local, or to another origin
JS Tutorial
