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 :)
