我正在为网站制作HTML小部件。例如,它将显示当前的股票指数。
简而言之,任意的网站所有者从我这里获取代码片段并将其包含在他的网页上
http://website.com/index.html
. 当任意用户打开时
网址:http://website.com/index.html
,我的代码将请求发送到我的服务器(provider.com),该服务器执行必要的操作并将信息返回给用户的浏览器。当响应到达时,用户将在
网址:http://website.com/index.html
.
在index.html中,可以这样调用服务
<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>
现在,问题出在
same origin policy
:我不能只将ajax请求从website.com发送到provided.com并返回html以嵌入到客户的网页中。我看到了一些解决方案,我在下面列出,但没有一个能让我满意。我想知道,你是否可以提出一些建议,特别是如果你有相关的经验。
1)iframe,简单明了。缺点:在某些浏览器中必须有固定的尺寸+愚蠢的滚动条。可以用javascript修复,但所有这些特定于浏览器的修补对我来说都不好。
2)
JSONP
. 问题:无法返回整个HTML块,必须只返回数据。然后,在浏览器方面,我将不得不使用javascript将数据嵌入静态放置在index.html中的HTML片段中。听起来不太好,因为数据格式不太简单,以后可能会改变。
3)使用hidden iframe执行Ajax请求。有点棘手,但听起来是个不错的选择。
好吧,这就是我对这个问题的看法。有更好的方法吗?
顺便说一句,我也试图检查一些现有的小部件,但没有找到太多有用的信息。
本文中使用的所有域名都是虚构的,任何相似之处完全是巧合:)
更新
现在就开始工作,正如斯拉克建议的那样!如果有人对细节感兴趣,那么响应HTML必须像这样进行后期处理(Ruby)
body = body.gsub '"', '\\"'
body = body.gsub /\n/, '\\n';
body = body.gsub '/', '\\/';
body = params[:callback] + '("' + body + '");';
之后,您可以使用jquery和“datatype:'jsonp'”选项。