@actualwave/messageport-dispatcher
Version:
Cross-domain EventDispatcher for MessagePort interface
68 lines (62 loc) • 2.34 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EventDispatcher Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script type="text/javascript" src="messageport-dispatcher.js"></script>
<script type="text/javascript">
var dispatcher = MessagePortDispatcher.getForSelf();
var name = '';
dispatcher.addEventListener('handshake', function(event) {
name = event.data.name;
$('#frameName').html(name);
});
dispatcher.addEventListener('dataReceived', function(event) {
addMessage(event.data.name, event.data.text);
});
function addMessage(name, text){
$('#messages').prepend('<div class="row"><div class="col-xs-12"><strong>' + name + '</strong>: ' + text.replace('<', '<') + '</div></div>');
}
$(document).ready(function() {
$('.btn-primary').on('click', function(event) {
dispatcher.dispatchEvent('sendData', {
name: name,
text: $('#message').val()
});
addMessage(name, $('#message').val());
$('#message').val('');
});
dispatcher.dispatchEvent('initialized');
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<h4 class="col-xs-8">Frame with own Dispatcher</h4>
<strong id="frameName" class="col-xs-4"></strong>
</div>
<div class="row">
<div class="col-xs-2 form-group">
<label for="message">Message:
</label>
</div>
<div class="col-xs-6 form-group">
<input type="text" class="form-control" id="message">
</div>
<div class="col-xs-4 form-group">
<input type="button" value="Send Event" class="btn btn-primary"></input>
</div>
</div>
<div id="messages">
</div>
</div>
</body>
</html>