问题
I am using the following code to embed a soundcloud widget:
SC.oEmbed(soundcloud_url, {color: "3C9FCE"}, document.getElementById('container_id'));
How do I bind a SC.Widget.Events.Ready to it? I don't see any way to set the id or class of the embed iframe so that I can select it. Nor do I know when it has been loaded so that I can bind it, such as the following dysfunctional code:
var frame = document.getElementById('container_id').getElementsByTag("iframe")[0];
frame.bind(SC.Widget.Events.Ready, listnerFucnt());
Thanks!
回答1:
If the reason you are using SoundCloud JavaScript SDK is to be able
to SC.oembed
to get embed HTML when having only SoundCloud permalink,
then you probably shouldn't. You can interact with either /resolve
or /oembed
endpoints instead.
The difference is that /oembed
endpoint doesn't require client_id
to be specified in request, so let's start with this approach first.
Option 1
I'll use jQuery, but the idea should be clear:
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');
});
});
This code live and commented – http://jsbin.com/ilesum/2/edit
Option 2
The other thing you could do is to use /resolve
endpoint, but you have to specify client_id
in order to interact with it, plus you will need to construct Widget iframe HTML yourself (which isn't too bad though):
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');
});
});
And example live as well http://jsbin.com/oqebuk/2/edit
Please note you can disable HTML or Output panes on JSBin, so it's easier to read the example JavaScript code.
来源:https://stackoverflow.com/questions/14637770/bind-to-a-dynamically-embedded-souncloud-widget