JQuery Cross-Domain .load()(自构小部件)

Question

我正在为人们在他们的网站上使用创建一个小部件,但为了保持小部件面向未来,我希望它是使用外部JavaScript自我构建.

因此,我要求人们在他们的网站上放置的小部件代码将是这样的:

<div id="my_widget"></div>
<script type="text/javascript" src="http://www.external-domain.com/mywidget.js"></script>

mywidget.js然后使用jquery 用iframe .load()填充#my_widgetdiv.

问题是这不起作用....

我需要做什么？

(注意我不想在我给客户的代码中使用iframe)

Answer 1

这取决于您在load函数中指定的url .如果此URL未托管在同一域上,则由于相同的源策略限制,执行包含此脚本的页面将无法正常工作.如果您可以控制函数中使用的服务器端脚本,那么进行跨域ajax调用的一种可能的解决方法是使用JSON-Pload.

这是JSON-P背后的想法:

1. 您提供在域A上托管的服务器端脚本,该脚本将返回JSONP格式的响应.域A是您完全控制的域.
2. 可以使用AJAX从域B调用此服务器端脚本.

我们假设http://domainA.com/myscript?jsoncallback=foo返回以下响应:

foo({ result: '<strong>Hello World</strong>' });

现在mywidget.js你可以调用这个脚本:

$.getJSON('http://domainA.com/myscript?jsoncallback=?', function(data) {
    $('#my_widget').html(data.result);
});

剩下的就是告诉用户包含mywidget.js脚本并提供占位符id="my_widget"来托管结果(你甚至可以在成功回调中生成这个占位符).

备注:使用JSONP时,您仅限于GET请求.这意味着您可以发送的请求大小有限制.