0.0.65 • Published 10 years ago
frame-channels v0.0.65
frame-channels
pub/sub channels between browser iframes
Usage
Open a channel to communicate with an iframe
var channel = frameChannels.create('my-channel', {
// iframe selector or window object
target: '#my-iframe',
// (optional) restrict message origin
originFilter: /^http\:\/\/domain\.com\//,
// (optional) timeout when waiting for a message response
responseTimeout: 30000,
// (optional) let the iframe control it's positioning with messages
allowPositionControl: true
// (optional) indicate how to create the iframe if it doesn't exists
iframe: {
id: 'my-iframe',
url: 'http://domain.com/path',
setup: function(element) {
channel.iframe.size(180, 50);
channel.iframe.dock('bottom-right');
// iframe is invisible by default
channel.iframe.show();
}
}
});
// send a message to the iframe
// ready() ensures the iframe is built and
// someone inside the iframe is listening (called channel.subscribe)
channel.iframe.ready().then(function(){
channel.push({ hello: 'world' });
channel.subscribe(function(msg){
console.log('got', msg);
});
});
Inside the iframe, open a channel with parent window
var channelA = frameChannels.create('my-channel', {
target: window.parent
});
channel.push({ hello: 'parent' });
channel.subscribe(function(msg){
console.log('parent sent', msg);
});
// set iframe position in parent
channel.push({ dock: 'bottom right', size: {
width: '180px',
height: '50px'
}});
channel.push({ maximize: true });
channel.push({ hide: true });
channel.push({ show: true });
channel.push({ restore: true });
using Request/Response pattern:
channel.push({
question: 'areYouOk?',
respond: true
}).then(function(response) {
if (response.ok) {
console.log('great');
}
});
// or simply
channel.request({
question: 'areYouOk?'
}).then(function(response) {
if (response.ok) {
console.log('great');
}
});
channel.request('location').then(function(response) {
console.log(response.city);
});
Note: channel.request()
is just an alias to push
that will set message.respond=true
.
channel.subscribe(function(msg, respond){
if (msg.question === 'areYouOk?' && respond) {
respond({ ok: true });
}
if (msg.value === 'location' && respond) {
respond({ city: 'Lima' });
}
});
0.0.65
10 years ago
0.0.64
10 years ago
0.0.63
10 years ago
0.0.62
10 years ago
0.0.61
10 years ago
0.0.60
10 years ago
0.0.57
10 years ago
0.0.55
10 years ago
0.0.52
10 years ago
0.0.51
10 years ago
0.0.50
10 years ago
0.0.48
10 years ago
0.0.47
10 years ago
0.0.46
10 years ago
0.0.37
10 years ago
0.0.36
10 years ago
0.0.35
10 years ago
0.0.20
10 years ago
0.0.19
10 years ago
0.0.17
10 years ago
0.0.15
10 years ago
0.0.14
10 years ago
0.0.13
10 years ago
0.0.11
10 years ago
0.0.10
10 years ago
0.0.9
10 years ago
0.0.8
10 years ago
0.0.7
10 years ago
0.0.6
10 years ago
0.0.5
10 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.2
10 years ago
0.0.1
10 years ago