Skip to content

Instantly share code, notes, and snippets.

@maffoo
Created April 13, 2012 16:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save maffoo/2378145 to your computer and use it in GitHub Desktop.
Save maffoo/2378145 to your computer and use it in GitHub Desktop.
wormhole - simple cross-domain ajax with a convenient interface
// backend
$(document).ready(function() {
// the server sets parentUrl in the page it serves, based on the http-referer
var windowProxy = new Porthole.WindowProxy(window.parentUrl + "/proxy.html");
function send(data) {
windowProxy.postMessage(JSON.stringify(data));
}
windowProxy.addEventListener(function(event) {
var data = $.parseJSON(event.data),
requestId = data.requestId,
params = data.params;
console.log(event);
$.ajax(params)
.done(function(data, textStatus, jqXHR) {
send({
type: 'response',
requestId: requestId,
success: true,
data: data,
textStatus: textStatus
});
})
.fail(function(jqXHR, textStatus, errorThrown) {
send({
type: 'response',
requestId: requestId,
success: false,
textStatus: textStatus
});
});
});
send({type: 'ready'});
});
// frontend
App.Wormhole = Ember.Object.extend({
init: function() {
var target = "wormhole_iframe";
// create the iframe
this.iframe = $('<iframe id="' + target +
'" name="' + target +
'" src="' + this.backendUrl +
'" style="width: 0; height: 0; border: none; display: none;"></iframe>');
$('body').append(this.iframe);
// create a porthole.js proxy window to send and receive message from the vault iframe
this.windowProxy = new Porthole.WindowProxy(this.backendUrl, target);
// handle messages based on their type
var self = this;
this.windowProxy.addEventListener(function(message) {
var data = $.parseJSON(message.data);
switch (data.type) {
case "ready": return self.onReady(data);
case "response": return self.onResponse(data);
default: throw Error("unknown message type: " + data.type);
}
});
},
linked: false,
pending: [],
nextRequest: 1,
deferreds: {},
// make an ajax request through the porthole
ajax: function(params) {
var requestId = this.nextRequest;
this.nextRequest += 1;
var deferred = $.Deferred();
this.deferreds[requestId] = deferred;
var request = {requestId: requestId, params: params};
if (this.linked) {
this.sendRequest(request);
} else {
this.pending.push(request);
}
return deferred.promise();
},
// send a request by posting it to the hidden iframe
sendRequest: function(request) {
this.windowProxy.postMessage(JSON.stringify(request));
},
// handle the initial ready message indicating that the iframe has loaded successfully
// we mark the link as being established and send any requests that are pending
onReady: function(data) {
this.linked = true;
for (var i = 0; i < this.pending.length; i++) {
this.sendRequest(this.pending[i]);
}
},
// handle responses to requests made through the wormhole
onResponse: function(data) {
var deferred = this.deferreds[data.requestId];
delete this.deferreds[data.requestId];
if (data.success) {
deferred.resolve(data.data, data.textStatus);
} else {
deferred.reject(data.textStatus, data.errorThrown);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment