客戶端網站可達性測試

Question

我正在構建一個通過apps.facebook.com系統運行的Facebook應用程序。這個問題不是專門針對Facebook應用的（所以如果你不熟悉這些，不要停止閱讀），但你會明白爲什麼這很重要。

每當用戶想要使用應用程序，他們將首先到一個標準的網站（一個更難忘的地址，讓我們使用xyz.com的例子），然後將自動重定向到Facebook應用程序。但是，有兩種可能的重定向目標：

1. 到標準Facebook應用程序頁面（例如apps.facebook.com/xyz）。如果客戶端可以訪問該頁面，就會發生這種情況。重要的是，客戶端可能無法訪問此頁面的原因是他們在運行阻止Facebook的內容過濾器（例如學校，大學，一些工作場所）的網絡上。

2. 如果客戶端無法訪問Facebook應用程序頁面，應該將其重定向到主網站上的另一個頁面（例如xyz.com/nofshooting_login.html）。

正如你所看到的，重定向的決定必須基於客戶是否能夠達到Facebook的應用程序頁面，還是不行。因此，測試需要在客戶端（大概）使用Javascript，jQuery或類似方法進行。但是，我不確定如何去做這件事。

任何建議將不勝感激。

Answer 1

由於同源策略，顯而易見的解決方案（僅向遠程域發送AJAX請求並查看響應是什麼）不起作用。

您可以要求Facebook實施Cross-origin resource sharing協議。如果他們同意，其餘更容易。如果不是，則$.ajax或本地XmlHttpRequest不會。

但是，儘管XHR受到同源策略的限制，但發送HTTP請求的其他方式卻不是：您可以使用src的某個圖像創建一個圖像，並在apps.facebook.com上查看它是否加載。這裏的問題是，facebook提供的大部分內容來自akamaihd.net，這不太可能與apps.facebook.com共同阻止。然而，我確實發現一個圖像來自apps.facebook.com： http://apps.facebook.com/images/spacer.gif（http://facebook.com/images/spacer.gif也存在）。 @RobW還指出我的圖標（http://apps.facebook.com/favicon.ico）

爲了測試是否能夠將圖像加載：

1. 創建一個新的img元素
2. 添加load偵聽器和一個error監聽到它，將執行重定向
3. 設置imgsrc
4. 將圖像添加到文檔不應該是必需的，但我沒有到處測試。

var img = document.createElement("img"); 
img.onload = function(){location.href = "http://apps.facebook.com/xyz"}; 
img.onerror = function(){location.href = "http://xyz.com/nofacebook_login.html"}; 
img.src = "//apps.facebook.com/favicon.ico"; //thanks @RobW 
document.body.appendChild(img); 

---

注：無處做的Facebook在保證圖像會一直存在。雖然似乎有一個不錯的機會，它可能會留下來，但最終可能會消失。如果發生這種情況，每個人都會出現阻塞（您可能想檢查錯誤代碼，但我不知道阻滯劑會返回什麼）。如果發生這種情況，請通知我或使用新的工作映像更新此答案。