Question

我使用以下代码嵌入一个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());

谢谢！

Answer 1

如果您使用SoundCloud JavaScript SDK的原因是可行的只有SoundCloud固定链接到SC.oembed才能嵌入HTML，那么你可能不应该。您可以与/resolve进行互动或者/oembed端点。

区别在于/oembed端点不需要client_id 要在请求中指定，所以让我们先从这个方法开始。

选项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代码。

将（）绑定到动态嵌入的souncloud小部件

1 个答案:

选项1

选项2