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的.load()用iframe填充#my_widget div。

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

我需要做什么？

（请注意，我不想在我提供给客户的代码中使用iframe）

Answer 1

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

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

Answer 2

您可以完全控制自己的网页，因为您在自己的网站上执行了 代码。

您可以创建iframe document.createElement("iframe")，将其注入页面document.getElementById("my_widget").appendChild(iframe)的任意位置，然后执行其他任何操作。

要注意的一件事是不要弄乱他们的命名空间...避免任何通常的命名空间并组成你自己的（__ my_widget或其他任何奇怪的东西）。并尝试将名称空间计数保持为1，如果可能，甚至不要。

请勿使用加载，如果您只是尝试从您的网站加载html，请使用iframe。