I’m making html widget for websites. Let’s say, it will display current stock indexes.
In short, arbitrary website owner takes code snippet from me and includes it on his webpage http://website.com/index.html. When arbitrary user opens http://website.com/index.html, my code sends request to my server (provider.com), which performs necessary operations and returns information to user’s browser. When response has arrived, user will see relevant stock value on http://website.com/index.html.
In index.html service could be called like this
<script type="text/javascript" src="provider.com/service.js"> </script>
<div id="target_area"></div>
<script type="text/javascript">
service.show("target_area", options);
</script>
Now, the problem is in the same origin policy: I can’t just send ajax request from website.com to provided.com and return html to embed in client’s webpage. I see several solutions, which I list below, but none quite satisfy me. I wonder, if you could suggest something, especially if you had some relevant experience.
1) iframe, plain and simple. Disadvantage: must have fixed dimensions + stupid scroll bars appearing in some browsers. Can be fixed with javascript, but all this browser-specific tinkering doesn’t sound good to me.
2) JSONP. Problem: can’t return whole chunk of html, must return only data. Then, on browser side, I’ll have to use javascript to embed data into html snippet placed statically in index.html. Doesn’t sound nice, because data format is not very simple and may even change later.
3) Use hidden iframe to do ajax requests. A bit tricky, but sounds like a way to go.
Well, that’s my thoughts on the subject. Are there any better ways?
BTW, I tried to check some existing widgets too, but didn’t find much useful information.
All domain names used in this text are fictional and any resemblance is purely coincidental 🙂
update
Works now, as SLaks suggested! If anyone’s interested in details, response html has to be post-processed like this (ruby)
body = body.gsub '"', '\\"'
body = body.gsub /\n/, '\\n';
body = body.gsub '/', '\\/';
body = params[:callback] + '("' + body + '");';
After that, you can use jquery with “dataType: ‘jsonp'” option.
You can use JSONP to send a string containing raw HTML.
JSONP is the best option here.