使用 Prototype 从另一个域加载 JavaScript 文件

发布于 2024-08-18 10:04:56 字数 506 浏览 5 评论 0原文

使用 Prototype,有人知道如何使用来自另一个域的 Ajax.Request 加载 javascript 文件吗?或者这是否可能?

我相信这可以用jquery实现,digg可以加载Facebook API:

jQuery.ajax({type:"GET",
url:"http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php",
cache:true, dataType:"script"});

来源:http ://cotnet.diggstatic.com/js/loader/370/digg_facebook

不看代码,我猜当 url 违反同源策略并且 dataType 是脚本时,jquery 会聪明地使用代理。

Using Prototype, anyone know how to load a javascript file using Ajax.Request from another domain? Or if this is possible?

I believe this is possible with jquery, digg do it to load the Facebook API:

jQuery.ajax({type:"GET",
url:"http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php",
cache:true, dataType:"script"});

Source: http://cotnet.diggstatic.com/js/loader/370/digg_facebook

Without looking at the code, I'm guessing jquery has the smarts to use a proxy when url violates the same origin policy and dataType is script.

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

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

发布评论

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

评论(2

咆哮 2024-08-25 10:04:56

检查这个..看来有一个特定的插件可以启用Prototype库中的功能,作者提到例如jQuery已经支持它很长一段时间了,但似乎Prototype默认情况下不支持它。

Check this out.. It seems that there is a specific plugin which enables the functionality in Prototype library, the author mentions that e.g. jQuery supports it already for a long time, but it seems it's not supported by default it Prototype.

尘世孤行 2024-08-25 10:04:56

感谢 Thomas 的回答,我创建了一个 FacebookApiLoader 类来执行此操作。这是源代码,目前仅在 Firefox 3 中进行了测试。希望这对某人有帮助。它的作用是查看页面上是否有任何依赖于 facebook api 的元素,如果有的话,它将通过在正文结束标记之前插入它来加载 facebook api 脚本。这依赖于 PrototypeJS 库。在可能需要 facebook api 的页面中调用 facebookApiLoader.observe()。

var FacebookApiLoader = Class.create({
  initialize: function() {
    this.observer = null
    this.observedElement = null
  },
  apiDependentsVisible: function() {
    if (null == this.observedElement) {
      // $('facebook-login') is a div in my site that
      // is display:none initially.  Once it is made
      // visible then the facebook api is needed.
      // Replace 'facebook-login' with id relevant for your site
      this.observedElement = $('facebook-login')
    }
    return this.observedElement.visible()
  },
  apiLoadCompleted: function() {
    try {
      return !Object.isUndefined(FB) && !Object.isUndefined(FB_RequireFeatures)
    } catch (e) {
    }
    return false
  },
  initAndRequireFeatures: function() {
    FB_RequireFeatures(["XFBML"],
      function() {
        FB.init('secret-put-your-app-value-here','/xd_receiver.html', {})
      }
    );
  },
  initFacebookConnect: function() {
    new PeriodicalExecuter(function(pe) {
      if (this.apiLoadCompleted()) {
        this.initAndRequireFeatures()
        pe.stop()
      }
    }.bind(this), 0.2);
  },
  loadApi: function() {
    // Use body for facebook script as recommended in Facebook
    // docs not to insert in head as some browsers have 
    // trouble with it
    body = $('body')[0]
    // TODO use https protocol if page is secure
    script = new Element('script', { 'type': 'text/javascript',
      'src': 'http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' })
    body.appendChild(script)
    this.initFacebookConnect()
  },
  loadApiIfRequired: function() {
    if (this.apiDependentsVisible()) {
      this.observer.stop()
      this.loadApi()
    }
  },
  observe: function() {
    if (null == this.observer) {
      this.observer = new PeriodicalExecuter(this.loadApiIfRequired.bind(this), 0.2)
    }
  }
});
// The FacebookApiLoader attributes are lazily loaded
// so creating a new facebookApiLoader
// is as low resource usage as possible
var facebookApiLoader = new FacebookApiLoader();

然后在任何可能需要 Facebook api 的页面上,调用

facebookApiLoader.observe();

Thx to Thomas's answer, I created a FacebookApiLoader class to do this. Here's the source, only tested in Firefox 3 at the moment. Hope this helps someone. What this does is looks to see if there are any facebook api dependent elements on the page, and if there are then it will load the facebook api script by inserting it before the body closing tag. This relies on the PrototypeJS library. Call facebookApiLoader.observe() in a page that might require the facebook api.

var FacebookApiLoader = Class.create({
  initialize: function() {
    this.observer = null
    this.observedElement = null
  },
  apiDependentsVisible: function() {
    if (null == this.observedElement) {
      // $('facebook-login') is a div in my site that
      // is display:none initially.  Once it is made
      // visible then the facebook api is needed.
      // Replace 'facebook-login' with id relevant for your site
      this.observedElement = $('facebook-login')
    }
    return this.observedElement.visible()
  },
  apiLoadCompleted: function() {
    try {
      return !Object.isUndefined(FB) && !Object.isUndefined(FB_RequireFeatures)
    } catch (e) {
    }
    return false
  },
  initAndRequireFeatures: function() {
    FB_RequireFeatures(["XFBML"],
      function() {
        FB.init('secret-put-your-app-value-here','/xd_receiver.html', {})
      }
    );
  },
  initFacebookConnect: function() {
    new PeriodicalExecuter(function(pe) {
      if (this.apiLoadCompleted()) {
        this.initAndRequireFeatures()
        pe.stop()
      }
    }.bind(this), 0.2);
  },
  loadApi: function() {
    // Use body for facebook script as recommended in Facebook
    // docs not to insert in head as some browsers have 
    // trouble with it
    body = $('body')[0]
    // TODO use https protocol if page is secure
    script = new Element('script', { 'type': 'text/javascript',
      'src': 'http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php' })
    body.appendChild(script)
    this.initFacebookConnect()
  },
  loadApiIfRequired: function() {
    if (this.apiDependentsVisible()) {
      this.observer.stop()
      this.loadApi()
    }
  },
  observe: function() {
    if (null == this.observer) {
      this.observer = new PeriodicalExecuter(this.loadApiIfRequired.bind(this), 0.2)
    }
  }
});
// The FacebookApiLoader attributes are lazily loaded
// so creating a new facebookApiLoader
// is as low resource usage as possible
var facebookApiLoader = new FacebookApiLoader();

Then on any page that might need the Facebook api on demand, call

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