跨域进行 JavaScript 调用

发布于 2024-09-24 23:32:59 字数 805 浏览 1 评论 0原文

目标是:

传递引用远程服务器上 JavaScript 文件的脚本标记。该 JavaScript 文件应返回 HTML,然后该 HTML 将显示在调用 HTML 页面上。

我尝试通过两种方式解决这个问题:

首先,我尝试在 JavaScript 中使用 XMLHttpRequest 来调用此远程服务器。在 IE 中,它将按预期工作,但 FF、Safari 和 Chrome 将返回空响应。我从研究中得到的总体响应是,请求被阻止,因为它尝试访问的服务器与其运行的服务器不同(都是本地主机,但端口不同)。

其次,我研究了像 Google Gadgets 这样的东西是如何工作的,因为它们有效地为您提供了一个引用外部 JavaScript 的简单脚本标记。据我所知,似乎有某种 iframe 操作仅通过使用的基本 url 进行(下面的示例)。尽管使用 iframe 不是我最初的想法,但这似乎是可行的方法。我猜测 Google 代码会将 iframe 作为 HTML 返回到嵌入此脚本的 HTML 文件中。

关于我应该如何进行有什么建议吗?

<script src="http://www.gmodules.com/ig/ifr?url=http://ralph.feedback.googlepages.com/googlecalendarviewer.xml&amp;synd=open&amp;w=320&amp;h=200&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

Here's the goal:

Hand off a script tag that references a JavaScript file on a remote server. That JavaScript file should return HTML that will then be displayed on the calling HTML page.

I've attempted to approach this in two ways:

First, I attempted to use XMLHttpRequest in JavaScript to call this remote server. In IE, it would work as expected but FF, Safari, and Chrome would return an empty response. The overall response I got from my research was that the request was being blocked since the server it's trying to access is different from where it's running (both localhost, but different ports).

Second, I looked at how things like Google Gadgets work as they effectively give you a simple script tag that's referencing external JavaScript. From what I can gather, it appears that there's some sort of iframe action going on simply by the base url being used (example below). This appears to be the way to go, even though using an iframe wasn't my initial thought. I'm guessing the Google code is returning an iframe as HTML to the HTML file that has this script embedded.

Any suggestion on how I should proceed?

<script src="http://www.gmodules.com/ig/ifr?url=http://ralph.feedback.googlepages.com/googlecalendarviewer.xml&synd=open&w=320&h=200&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

爱你是孤单的心事 2024-10-01 23:32:59

JSONP 是处理 同源政策。由于大多数 javascript 框架(例如 jquery)已经支持它,因此您无需了解技术细节即可使用它。
您还可以通过从 javascript 构造 script 标记来自己实现这一点(如您所提到的)。 Google Analytics 代码片段就是这种方法的一个例子:

      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = 'url here';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);

至于 iframe 的想法(如果我正确理解你的话),它是行不通的。您可以在页面上使用 iframe 元素来显示来自另一台服务器的内容,但浏览器不允许您使用 JavaScript 从主页访问它。

编辑
这个原始提案详细介绍了 JSONP 的用法:
http://bob.pythonmac.org/archives/2005 /12/05/remote-json-jsonp/

JSONP is a very common way to deal with same origin policy. Since most javascript frameworks (e.g., jquery) already support it, you don't have to get into technical details to use it.
You can also do the trick yourself by constructing script tag from javascript (as you mentioned). Google Analytics code snippet is an example of such approach:

      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = 'url here';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);

As for iframe idea (if I understand you currectly), it's not gonna work. You can use iframe element on your page to display content from another server, but browser won't let you access it from main page using javascript.

edit
This original proposal details JSONP usage:
http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/

吃不饱 2024-10-01 23:32:59

您将需要一个服务器端代理来进行 x 域调用。

网上有许多可用的实现,或者您可能可以用您选择的语言快速实现一种以适合您的堆栈。

有关图形和 PHP 代理的更多信息,请参阅此处 - http://developer.yahoo.com /javascript/howto-proxy.html

You will need a server-side proxy for x-domain calls.

There are many implementations available online or you could probably whip one up in language of your choice to fit into your stack.

More info with graphics and a PHP proxy available here - http://developer.yahoo.com/javascript/howto-proxy.html

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文