I'm trying to code a Widget using Soundcloud API (locally).
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Soundcloud musics</title>
</head>
<body>
<h1>Soundcloud musics</h1>
<iframe id="iframe"
class="iframe"
width="100%"
height="465"
scrolling="no"
frameborder="no">
</iframe>
<script src="api.js"></script>
<script>
var player;
player = SC.Widget(document.getElementById('iframe'));
console.debug(player);
player.load('https://soundcloud.com/somesong', null);
</script>
</body>
</html>
The error i got from running this is :
Uncaught TypeError: Cannot read property 'substr' of null
E # api.js:204
d # api.js:328
n.exports.v # api.js:326
(anonymous function) # index.html:21
I've entered soundcloud's minimized api code into a js beautifier so i can track the error. Here's the code : https://jsfiddle.net/0anL7jfs/
Am i doing something wrong ? It seems that the problem is coming from the SC.Widget() function...
You'll need to change a couple of things:
Define src within your iframe with the player widget api url and properties:
<iframe id="iframe"
class="iframe"
width="100%"
height="465"
scrolling="no"
frameborder="no"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/76067623&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&visual=true">
</iframe>
Bind your events with widget.bind:
<script type="text/javascript">
(function(){
var iframeElement = document.getElementById('iframe');
var widget = SC.Widget(iframeElement);
widget.bind(SC.Widget.Events.READY, function () {
console.log('Ready');
widget.bind(SC.Widget.Events.PLAY, function () {
widget.getCurrentSound(function (sound) {
console.log(sound.title);
});
});
widget.bind(SC.Widget.Events.FINISH, function () {
console.log('Finished');
});
});
}());
</script>
Example:
http://jsfiddle.net/dqz1jmzo/ ( JQuery Version )
Related
The problem is this: inside my main page (parent.html) I have an iframe (child.html) and a script block. In that script block there is a array of integers and a function that adds elements to the list. In the iframe there is a new function that adds an element to the list of the main file (parent.html).
I would like to know if it is possible for the iframe (child.html) to access this function found in parent.html. Example:
parent.html
<html>
<head>
<title>Parent</title>
<script>
var parentList = [0];
var counter = 0;
function addValue(){
counter++;
parentList.push(counter);
console.log('parent', parentList);
}
</script>
</head>
<body>
<button onclick="addValue()">Add Value (Parent)</button>
<br />
<iframe src="child.html" allowfullscreen></iframe>
</body>
</html>
child.html
<html>
<head>
<title>Child</title>
</head>
<body>
<button onclick="addValueInternal()">Add Value Child</button>
<script>
var internalCount = 0;
function addValueInternal() {
internalCount++;
parentList.push(internalCount);
console.log('child', parentList);
}
</script>
</body>
</html>
The error:
child.html:12 Uncaught ReferenceError: parentList is not defined
at addValueInternal (child.html:12)
at HTMLButtonElement.onclick (child.html:6)
Yes. it is possible. Based on an example calling a function defined in the parent from an embedded iframe.
So in your case, you would have to reference the parent when accessing your array.
function addValueInternal() {
internalCount++;
parent.parentList.push(internalCount); // here we access the reference
console.log('child', parentList);
}
Be aware that you may encounter problems concerning the cross-origin policy afterwards.
I made an iFrame and would like to change it's source when it's load to next of 10 different sources:
It would look like this:
iframe loaded => change to example.com => iframe loaded => change to example1.com => iframe loaded => change to example2.com...
Is there any way to do this? ... I'm stuck on this and have no idea what can i do:
<html>
<body>
<iframe src="http://www.example.com"> </iframe>
<script>
var links = [
"http://www.js.com",
"http://example.com",
"http://example1.com"];
alert(links[2])
function srca (){
document.getElementsByTagName('iframe')[0].src = links[0]
}
</script>
</body>
</html>
You were almost there, you just forgot to hook into some kind of event (like onload)..
Just to get you started, here ya go:
<html>
<head>
<script>
var links = [ 'http://www.js.com'
, 'http://example.com'
, 'http://example1.com'
]
, lnkCnt = 0
;
function srca(){
links.length > lnkCnt && (
document.getElementsByTagName('iframe')[0].src = links[lnkCnt++]
);
}
</script>
</head>
<body>
<iframe src="about:blank" onload="setTimeout(srca, 2000);"></iframe>
</body>
</html>
Using the Soundcloud JavaScript API, I want to dynamically generate a page of player widgets using track search results. My code is as follows:
<html>
<head>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
function makeDivsFromTracks(tracks,SC)
{
var track;
var permUrl;
var newDiv;
for(var ctr=0;ctr<tracks.length;ctr++)
{
newDiv=document.createElement("div");
newDiv.id="track"+ctr;
track=tracks[ctr];
SC.oEmbed(track.permalink_url,{color:"ff0066"},newDiv);
document.body.appendChild(newDiv);
}
}
</script>
</head>
<body>
<script>
SC.initialize({
client_id: 'MY_CLIENT_ID'
});
SC.get('/tracks',{duration:{to:900000},tags:'hitech',downloadable:true},
function(tracks,SC)
{
makeDivsFromTracks(tracks,SC);
});
</script>
</body>
</html>
When I load this, the SC.oEmbed() call throws an error:
Uncaught TypeError: Cannot call method 'oEmbed' of null
which would seem to indicate that either the divs aren't being generated or the search results aren't being returned, but if I remove the SC.oEmbed() call and replace it with:
newDiv.innerHTML=track.permalink_url;
then I get a nice list of the URLs for my search results.
And if I create a widget using a static div and static URL, e.g.
<body>
<div id="putTheWidgetHere"></div>
<script>
SC.initialize({
client_id: 'MY_CLIENT_ID'
});
SC.oEmbed("http://soundcloud.com/exampleTrack", {color: "ff0066"}, document.getElementById("putTheWidgetHere"));
</script>
</body>
then that works fine as well. So what's the problem with my oEmbed() call with these dynamically created elements?
Solved it. I took out the SC argument from the callback function and makeDivsFromTracks(), and now all the players show up. Not sure exactly why this works--maybe it has to do with the SC object being defined in the SDK script reference, so it's globally available and doesn't need to be passed into functions?
Anyways, working code is:
<html>
<head>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
function makeDivsFromTracks(tracks)
{
var track;
var permUrl;
var newDiv;
for(var ctr=0;ctr<tracks.length;ctr++)
{
newDiv=document.createElement("div");
newDiv.id="track"+ctr;
track=tracks[ctr];
//newDiv.innerHTML=track.permalink_url;
SC.oEmbed(track.permalink_url,{color:"ff0066"},newDiv);
document.body.appendChild(newDiv);
}
}
</script>
</head>
<body>
<script>
SC.initialize({
client_id: 'MY_CLIENT_ID'
});
SC.get('/tracks',{duration:{from:180000,to:900000},tags:'hitech',downloadable:true},function
(tracks){makeDivsFromTracks(tracks);});
</script>
</body>
</html>
I am showing a pdf inside a html using:
<embed id="print" src="file.pdf" type="application/pdf" width="100%" height="100%">
I would like to create a button that prints that file.
I thought it would be something like this; but it isn't working.
<button onClick="javascript:document.getElementById('print').print();">
Anybody an idea how I can call the print function on an embedded file?
<script type="text/javascript">
function printPDF(pdfUrl)
{
var w = window.open(pdfUrl);
w.print();
}
</script>
You can call this function printPDF("http://mywebsite.com/myfile.pdf")
This code is giving me error on line 10 in IE6. That is, var ref = ...;
What is the error here?
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<SCRIPT language="JavaScript1.2">
function MyClass()
{
this.OpenWindow = function()
{
var ref = window.open ("http://www.google.com", "mywindow", "location=1,status=1,scrollbars=1,width=100,height=100");
ref.moveTo(0,0);
}
}
</SCRIPT>
<body onload="javascript: new MyClass().OpenWindow()">
<H1>JavaScript Popup Example 3</H1>
</body>
</html>
The message:
A run-time error has occurred.
Do you wish to debug?
Line:10
Error: Access is denied
When you open a window with a page from a different domain, you don't get a reference to the window back. The ref variable is null.
If you want to move the window, you have to open it without a page, move it, then load the page in it:
var r = window.open ('', 'mywindow', 'location=1,status=1,scrollbars=1,width=100,height=100');
r.moveTo(0,0);
r.location.href = 'http://www.google.com';
the problem is here - ref.moveTo(0,0); - on most security settings this action is unavailable
also, javascript: on onload just creates a label "javascript"
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<SCRIPT language="JavaScript">
function MyClass()
{
this.OpenWindow = function()
{
var ref = window.open("http://www.google.com", "mywindow", "location=1,status=1,scrollbars=1,width=100,height=100");
ref.moveTo(0,0);
}
}
</SCRIPT>
<body onload="new MyClass().OpenWindow()">
<H1>JavaScript Popup Example 3</H1>
</body>
</html>