Soundcloud HTML5 API无法与Facebook JS一起使用

Question

我正在尝试设置位于此处的SC html 5 api:

http://w.soundcloud.com/player/api.js

然而,它在Firebug中抛出了"c is undefined"错误(7次).

经过一些挖掘后,似乎这些错误只会出现,如果我像这样异步加载Facebook JS:

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=137624476258287";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

api.js和facebook.js似乎都使用函数包装器,但FB导致soundcloud错误输出.

---

我在下面添加了我的解决方案,这个错误可能不仅出现在Facebook上,而且出现在任何使用HTML5消息传递的应用程序中,所以这也是所有这些的一般修复.

Answer 1

好吧,我决定深入挖掘一下,找到了这个问题的解决方案(和原因).

首先,我使用jsbeutifier(http://jsbeautifier.org/)以更易读的格式获取代码.该错误来自一个名为D的函数.此函数被添加为HTML5消息监听器的处理程序:

    window.addEventListener ? window.addEventListener("message", parseMessage, !1) : window.attachEvent("onmessage", parseMessage); 

(我在这里将D重命名为parseMessage)

接下来,如果查看D(parseMessage)函数,我们会看到代码尝试解析消息而不检查原点.

问题是,Facebook还向"消息"处理程序发送消息!如果打印出所有消息,您可以看到这一点,所有错误实际上都是SC api试图解析Facebook消息!

解决方案是在解析消息之前检查原点(如Opera HTML5开发站点中所述:http://dev.opera.com/articles/view/window-postmessage-messagechannel/)

这是固定的"D"功能:

function D(a) {
        var b, c, d, e;

        if(a.origin == 'http://w.soundcloud.com'){
            try {
                c = JSON.parse(a.data)
            } catch (f) {
                console.log(f);
            }

            b = y(a.source);
            d = c.method;
            e = c.value;
            d === i.READY && (b ? (b.isReady = !0, C(b, k), v(k, b)) : m.push(a.source));
            if (!b || a.origin !== b.domain) return !1;
            var g = [];
            e !== undefined && g.push(e), C(b, d, g)
        }
    }

或整个um-ninified解决方案:http://jsfiddle.net/6uREk/1/

谢谢T.