javascript - 客户端网站可达性测试

Question

我正在构建一个通过 apps.facebook.com 系统运行的 Facebook 应用程序。这个问题不是专门针对 Facebook 应用程序的(所以如果您不熟悉这些应用程序，请不要停止阅读)但您很快就会明白为什么这很重要。

每当用户希望使用该应用程序时，他们将首先访问一个标准网站(具有更容易记住的地址，让我们使用示例 xyz.com)，然后该网站将自动重定向到 Facebook 应用程序。但是，有两个可能的重定向目的地:

1. 到标准的 Facebook 应用程序页面(例如 apps.facebook.com/xyz)。如果客户端可以访问该页面，就会发生这种情况。重要的是，客户可能无法访问此页面的一个原因是，如果他们在运行阻止 Facebook 的内容过滤器(例如学校、大学、某些工作场所)的网络上。

2. 如果客户端无法访问 Facebook 应用程序页面，他们应该被重定向到主网站上的另一个页面(例如 xyz.com/nofacebook_login.html)。

如您所见，重定向决策需要基于客户端 是否可以访问 Facebook 应用程序页面。因此，测试将需要在客户端(大概)使用 Javascript、jQuery 或类似工具进行。但是，我不确定该怎么做。

如有任何建议，我们将不胜感激。

Answer 1

由于同源策略，显而易见的解决方案(只需向远程域发送 AJAX 请求并查看响应是什么)不起作用。

您可以要求 Facebook 实现 Cross-origin resource sharing协议(protocol)。如果他们同意，剩下的就容易多了。但是，如果不是，$.ajax - 或 native XmlHttpRequest - 将不会执行。

但是，虽然 XHR 受同源策略约束，但发送 HTTP 请求的其他方式却不受此约束:您可以使用 apps 上某些图像的 src 创建图像.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. 设置img src
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 没有任何地方保证任何一个图像将永远存在。虽然它似乎很有可能会留下来，但它最终可能会消失。如果发生这种情况，每个人都会出现阻塞(您可能想检查错误代码，但我不知道阻塞器返回什么)。如果发生这种情况，请通知我或使用新的工作图像更新此答案。