javascript - JQuery跨域.load()(自建widget)

Question

我正在创建一个小部件供人们在他们的网站上使用，但是为了让小部件面向 future ，我希望它能够使用外部 javascript 自行构建。

所以我会要求人们放在他们网站上的小部件代码应该是这样的:

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

mywidget.js 然后会使用 jquery 的 .load() 来用 iframe 填充 #my_widget div。

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

我需要做什么？

(注意我不想在我提供给客户的代码中包含 iframe)

Answer 1

这取决于您在 load 函数中指定的 url。如果此 url 未托管在执行包含此脚本的页面的同一域中，则由于 same origin policy 而无法工作限制。进行跨域 ajax 调用的一种可能的解决方法是使用 JSON-P如果您可以控制 load 函数中使用的服务器端脚本。

这是 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 请求。这意味着您可以发送的请求的大小有限制。