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

【问题标题】：Using Prototype to load a JavaScript file from another domain使用 Prototype 从另一个域加载 JavaScript 文件
【发布时间】：2011-01-08 05:30:32
【问题描述】：

使用 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 很聪明地使用代理。

【问题讨论】：

标签： javascript jquery cross-domain prototypejs same-origin-policy

【解决方案1】：

Check this out.. 似乎有一个特定的插件可以启用 Prototype 库中的功能，作者提到例如jQuery已经支持很久了，但是好像默认不支持它的Prototype。

【讨论】：

感谢 Thomas，这非常有帮助，我查看了导致我在我的答案中创建并插入脚本元素到正文中的 api URL 的内容。您也可以在头部执行此操作，但对于我正在使用的 facebook api，他们建议将其放在正文中。

【解决方案2】：

感谢 Thomas 的回答，我创建了一个 FacebookApiLoader 类来执行此操作。这是源代码，目前仅在 Firefox 3 中测试。希望这可以帮助某人。这样做是查看页面上是否有任何 facebook api 依赖元素，如果有，它将通过在 body 结束标记之前插入 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();

【讨论】：