bind()将动态嵌入式souncloud部件 [英] Bind() to a dynamically embedded souncloud widget
问题描述
我用下面的code嵌入的SoundCloud插件:
I am using the following code to embed a soundcloud widget:
SC.oEmbed(soundcloud_url, {color: "3C9FCE"}, document.getElementById('container_id'));
我如何绑定一个SC.Widget.Events.Ready呢?我看不出有什么方法来设置嵌入iframe的ID或类,这样我可以选择它。我也不知道什么时候已经被加载,这样我可以绑定,如下面的功能失调code:
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());
谢谢!
推荐答案
如果您正在使用的JavaScript的SoundCloud SDK的原因是为了能
到 SC.oembed
仅有的SoundCloud永久时候能得到嵌入HTML,
那么你可能不应该。您可与互动/决心
或 /透过oEmbed
终端来代替。
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.
不同的是, /透过oEmbed
终端不需要的client_id
在申请中指定,让我们开始使用这种方法第一次。
The difference is that /oembed
endpoint doesn't require client_id
to be specified in request, so let's start with this approach first.
我将使用jQuery,但这个想法应该是清楚的:
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');
});
});
这code生活和注释 - http://jsbin.com/ilesum/2/edit
This code live and commented – http://jsbin.com/ilesum/2/edit
您可以做的另一件事是使用 /决心
端点,但你必须指定的client_id
为了与它交互,再加上你将需要构建的Widget IFRAME HTML自己(这是不是太糟糕,虽然):
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');
});
});
和生活的例子,以及 http://jsbin.com/oqebuk/2/edit
请注意,您可以禁用的 HTML 或输出在JSBin窗格,所以它更容易阅读的例子的JavaScript code。
Please note you can disable HTML or Output panes on JSBin, so it's easier to read the example JavaScript code.
这篇关于bind()将动态嵌入式souncloud部件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!