Cross-domain templating with Javascript
- by Husky
I'm currently building a Javascript library that can be used to easily create embeddable media based on the URL of a media file, and then be controlled using Javascript methods and events (think something like the Flash / Silverlight JW player).
Of course, i could simply cat all the html tags from the Javascript library and send that to the browser:
function player(url) {
document.write('<object type="foo"><param name="something" value="bar">' +
<param name="source" value=" + url + '/></object>');
}
But i think this is a very ugly practice that tends to create unmanageable code that is unreadable when you review it a few weeks later.
So, a templating solution seems to be the way to go. I've been looking to EJS because it loads the templates using AJAX, so you can manage your templates in separate file instead of directly on the HTML page.
There's one 'gotcha' with that: my library needs to be completely cross-domain: the library itself could be located on foo.com while the serving site could be located on bar.com. So if bar.com would want to add a media player using the library it needs to do an AJAX call to a template located on foo.com, which won't work because of the same-origin policy in browsers.
AFAIK, there's no library that uses something like JSONP to read and write templates to get around this problem.
Could anyone point me to a solution for this problem?
