2

我正在使用以下代码嵌入 soundcloud 小部件：

SC.oEmbed(soundcloud_url, {color: "3C9FCE"},  document.getElementById('container_id'));

如何将 SC.Widget.Events.Ready 绑定到它？我看不到任何设置嵌入 iframe 的 id 或类的方法，以便我可以选择它。也不知道是什么时候加载的，这样我就可以绑定了，比如下面这个功能失调的代码：

var frame = document.getElementById('container_id').getElementsByTag("iframe")[0];
frame.bind(SC.Widget.Events.Ready, listnerFucnt());

谢谢！

4

1 回答 1

4

如果您使用 SoundCloud JavaScript SDK 的原因是能够SC.oembed在只有 SoundCloud 永久链接的情况下嵌入 HTML，那么您可能不应该这样做。/resolve 您可以改为与其中一个或/oembed端点交互。

不同的是，/oembedendpoint 不需要client_id 在 request 中指定，所以我们先从这种方法开始。

选项1

我将使用 jQuery，但想法应该很清楚：

var SOUNDCLOUD_URL = 'http://soundcloud.com/georgconrad/shostakovich2',
    WIDGET_OPTIONS = '&color=3C9FCE&liking=false';

jQuery
  .getJSON( 
    'http://soundcloud.com/oembed.json?url=' + SOUNDCLOUD_URL + WIDGET_OPTIONS 
  )
  .done( function ( data ) {
    var widget;
    $('body').html( data.html );
    widget = SC.Widget($('body').find('iframe')[0]);
    widget.bind('ready', function () {
      alert('widget ready');
    });
  });

此代码实时并评论 - http://jsbin.com/ilesum/2/edit

选项 2

您可以做的另一件事是使用/resolve端点，但您必须指定client_id才能与之交互，而且您需要自己构建 Widget iframe HTML（虽然这还不错）：

var SOUNDCLOUD_URL = 'http://soundcloud.com/georgconrad/shostakovich2',
    CLIENT_ID = 'YOUR_CLIENT_ID',
    TEMPLATE = '<iframe width="100%" height="166" scrolling="no" ' +
               'frameborder="no" src="http://w.soundcloud.com/player/?url={url}{options}" '+ 
               'class="sc-widget"></iframe>';

$.getJSON(
  'http://api.soundcloud.com/resolve.json?url=' + SOUNDCLOUD_URL + 
  '&client_id=' + CLIENT_ID
).done(function ( soundData ) {
  // I am using String.prototype.supplant from Crockford
  // (if you follow example code link you'll see what I mean)
  $('body').html(TEMPLATE.supplant({
    url: soundData.uri,
    options: '&color=3C9FCE'
  }));
  widget = SC.Widget($('body').find('iframe')[0]);
  widget.bind('ready', function () {
    alert('widget ready');
  });
});

和例子一样http://jsbin.com/oqebuk/2/edit

请注意，您可以禁用JSBin 上的HTML或输出窗格，以便更容易阅读示例 JavaScript 代码。

于 2013-02-03T19:29:13.240 回答