的SoundCloud HTML5 API不與Facebook JS

我試圖建立SC HTML 5 API設在這裏工作：的SoundCloud HTML5 API不與Facebook JS

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

但是它拋出一個「c是未定義」錯誤（7次）在Firebug。

後一點挖掘它的看來，這些錯誤僅會在我異步加載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消息的任何應用程序，所以這是所有那些一般的修復爲好。

來源

2012-06-18 Totomobile

我無法重現此問題。你能提供一個鏈接到一個HTML頁面，我可以測試它嗎？ –

嗯，我決定深入一點，並且已經找到了解決辦法（和原因）這個問題。

首先，我使用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消息！

的解決方案是解析消息（如在歌劇HTML5 dev的站點中描述：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/

感謝牛逼

來源

2012-07-02 20:31:52 Totomobile

謝謝，花了一天的最好時間嘗試解決這個錯誤。很好的工作，向SC發佈錯誤報告，確認問題。 – digitalpencil

找到了解決方案！

只是加載的SoundCloud API ASYC與延遲和沒有錯誤將eccour .. （怪異的錯誤BTW：/）

<script> 
setTimeout(function(){ 

(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 = "http://w.soundcloud.com/player/api.js"; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'sc')); 
},2000); 

(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')); 
</script>

來源

2012-06-19 17:57:02

http://jsfiddle.net/XpeaZ/ - 作爲參考 –

感謝您在這方面的努力！我會盡快進行測試。 – Totomobile

不幸的是，仍然是相同的錯誤。我相信錯誤在Soundcloud代碼中，我會嘗試聯繫他們讓他們知道。謝謝你的幫助！ – Totomobile

的SoundCloud HTML5 API不與Facebook JS

回答

相關問題