Bind() 到动态嵌入的 soundcloud 小部件答案

【问题标题】：Bind() to a dynamically embedded souncloud widgetBind() 到动态嵌入的 soundcloud 小部件
【发布时间】：2013-02-01 00:34:00
【问题描述】：

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

谢谢！

【问题讨论】：

标签： javascript api widget soundcloud oembed

【解决方案1】：

如果您使用 SoundCloud JavaScript SDK 的原因是能够到SC.oembed 以在只有 SoundCloud 永久链接时嵌入 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 代码。

【讨论】：

完美！您提供的第二个选项正是我想要的。