FrameProxy.js allows to call functions/properties through browser windows/frames in a transparent manner. It wraps functions/properties on an a window/frame and uses window.postMessage (HTML5) to invoke the same function/property on another window/frame. This can be used to use a hidden iframe as proxy to call functions in a different domain.
While the appropiate way to implement cross-domain request is using CORS http headers, many existent http APIs don't support Allow-Origin http headers. FrameProxy.js allows to workaround cross-domain restriction in browsers. The only requirment is to upload frameproxy.js and frameproxy.htm in the same domain you want to invoke. frameproxy.htm gets loaded in a hidden iframe and ajax calls are proxied transparently to this frame using the standard way to comuncate between frames in HTML5, window.postMessage()
- jQuery 1.5+
By default,
All invocations return a jQuery promise object so integration with jQuery is straightforward.
- Host frameproxy.js and frameproxy.htm in the same domain of the service to invoke.
- Restrict access by modify frameproxy.htm, restriction can be by password, domain, uri, or allowed functions/properties.
- options.domain, options.uri and options.expressions accept:
- a string, '*' (all), a filter function or a RegExp
- an Array of any of these
-
An a different domain page you can create a frameproxy client (this will load a hidden iframe):
var proxy = new frameproxy.ProxyClient('http://myhost/frameproxy.htm') // wrap all functions in frameproxy.functions .wrapAll() // or, wrap all functions in frameproxy.functions, and replace them by the proxied versions .wrapAll(true) // or, wrap other functions or properties .wrap('navigator.userAgent', 'bloglib.getBlogComments') // or, wrap other functions or properties, and replace them by the proxied versions .wrap(true, 'navigator.userAgent', 'bloglib.getBlogComments') // invoked when proxy is ready to use .ready(function(){ // if used .wrapAll() now you can: proxy.jQuery.ajax({ url: 'http://myhost/safedata' }).then(done, fail); // if you used .wrapAll(true), the original function got replaced $.ajax({ url: 'mydata.json' }); // if you used .wrap('navigator.userAgent') proxy.navigator.userAgent().done(function(e){ alert('agent: '+e.result); }); // note that properties are replaced by functions // if you used .wrap(true, 'bloglib.getBlogComments') bloglib.getBlogComments({user:'jsmith'}).done(function(e){ alert('commments: '+e.data); }); // proxied functions return a jQuery promise });