Soundcloud Javascript API - connect window.opener.setTimeout () not working
I followed a simple example of connecting to the SC API which is on their dev site. I was able to get everything working on my local server, but now when I clicked it to my site it doesn't seem to work.
The "Connect to Application" window will appear. I click connect. It shows my page "redirect_url" which has:
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
But it looks like it never works.
I found one SO question about this from 2 years ago here: Javascript SDK connect () function does not work in chrome
And the top answer says there is a problem trying to do this if you have a Chrome Chrome app and try listening to the "Storage Event" as a workaround.
My problem is that I don't have an SC app installed on chrome and never have. Also, it seems odd that this works fine on my local server.
Can anyone think of a way to move the code to my web host, maybe this was killed? Are some hosting companies blocking window.opener.setTimeout () for some reason or something else?
Thanks in advance for your help.
source to share
Found it out after what was considered hours of hopeless debugging.
Turn the callback into a script tag like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body>
<b style="text-align: center;">This popup should automatically close in a few seconds</b>
<script type="text/javascript">
window.opener.SC.connectCallback.call(this);
</script>
</body>
</html>
This is a bit weird because the function expects to be called on window
, and not SC
, therefore, the call call()
.
The other part is that this
you need to reference the popup window
, as this is set with window.location.search
. The url looks like this:
http://localhost:8080/callback.html?code=<CODE>&state=SoundCloud_Dialog_ca4d6#access_token=<ACCESS TOKEN>&scope=non-expiring
And if you look at window.opener.SC.connectCallback
, it looks like this:
function (){r.notifyDialog(this.location)}
So there this
should be a popup for, not the original parent window.
If you pass a function connectCallback
to the parent window setTimeout
, it is called with this
set to the parent window window
, which has no request parameters window.location.search
(auth tokens).
Hope this makes sense. At least it should solve your problem.
Also, if you insist on using the body's onload property, you can simply change it to this:
<body onload="setTimeout(window.opener.SC.connectCallback)">
source to share