仅当存在JavaScript时才导航到URL

时间:2013-12-20 05:45:51

标签: javascript

我正在尝试让我的网页导航到提供的网址。如果URL提供不存在,我希望我的页面重定向到备用URL。我需要在JavaScript中执行此操作。

这是我到目前为止所尝试的:

var customUrl    = 'http://www.StackOverflow.com/ThisPageWillResultIn404';
var alternateUrl = 'AlternateUrl.html?e=PageIs404'

setTimeout(function() { window.location=alternateUrl; }, 25);
window.location = customUrl;

这似乎在IOS中运行良好,但在Android中却不行。

1 个答案:

答案 0 :(得分:3)

为什么Javascript无法执行此操作 -

如果跨域(而非来自您的站点域)发出请求,则请求将失败。这是由于称为“Same-Origin Policy”的安全策略,在主流浏览器中强制执行以防止XSS (cross site scripting)。同源政策维基百科页面中列出的表格可以很好地描述跨域和非跨域的内容。

enter image description here

总而言之,客户端脚本不能也不应该能够通过Same-Origin策略访问被视为跨域的站点。

这意味着 Javascript 将无法满足您的要求,因为它无法确定您的用户提供的链接,除非这些链接指向您自己的网站。

  

这似乎在IOS中运行良好,但在Android中却不行。

虽然在任何设备上都不可能这样做,但您当前的方法很可能有效,因为不存在的页面可能会导致设备的浏览器在尝试加载不存在的页面时停留。虽然它仍然挥之不去,但超时中的代码会运行并重定向。虽然这很聪明,但它依赖于几个假设:

  1. 当遇到不存在的页面时,浏览器将会停留。
  2. 浏览器会停留超过25毫秒。
  3. 这些假设有什么问题?

    1. 您无法假设所有浏览器都会停留。这可以解释为什么Android设备似乎不适合您。如果负责被调用链接的服务器配置为返回 404页,则页面将正常加载,使您的脚本不知道链接实际上不存在。例如,this page不存在,但仍会返回404页面。

    2. 页面加载的时间长度还取决于几个因素,例如连接速度,浏览器,页面为不回复的请求提供的超时/容差等。很可能在慢速连接上使用您的站点的客户端将无法访问任何站点,因为加载它们的时间超过25毫秒,而使用快速连接和特定浏览器的用户可能会遇到加载速度超过25毫秒的所有页面,从而阻碍系统的运行意图。

    3. 这可以做什么?

      解决此问题的正确方法需要在服务器端执行某些操作。服务器端语言可以访问跨域链接并确定页面是否存在。 Stackoverflow用户karim79显示了如何使用以下 PHP 代码段(How can I check if a URL exists via PHP?)完成此操作:

      $file = 'http://www.domain.com/somefile.jpg';
      $file_headers = @get_headers($file);
      if($file_headers[0] == 'HTTP/1.1 404 Not Found') {
          $exists = false;
      }
      else {
          $exists = true;
      }
      

      然后可以使用带有ajax的 Javascript 调用来向脚本发送参数,然后获得响应。显然,必须对上面的 PHP 脚本进行微调,以包含参数和返回值。

      幸运的是,雅虎提供了一个由YQL驱动的API,他们称之为:

        

      通过一个简单的方法跨Web服务查询,过滤和连接数据   语言。消除了学习如何调用不同API的需要。

      另一位寻找类似解决方案的用户(Can jQuery/js help me determine if an URL exists)从Stackoverflow用户Sheikh Heera得到了答案,该用户使用 Yahoo API 提供了以下解决方案:

      function isUrlExists(url)
      {
          $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
            "q=select%20*%20from%20html%20where%20url%3D%22"+
            encodeURIComponent(url)+"%22&format=json'&callback=?", function(data){
                if(data.results[0]){
                    alert('Exists');
                }
                else{
                    alert('Doesn\'t exist');  
                }        
            }
          );
      }
      isUrlExists('http://google.com');
      

      基本上,Yahoo会在请求服务器端进行,并允许您获得结果,而无需自己编写任何服务器端。 这太棒了!这个特殊的例子使用 jQuery ,但是,它可以只用简单的 Javascript 来完成。

      我已经用这种特殊的方法写了一个JS-Fiddle,似乎有用。看看:

      http://jsfiddle.net/L84RV/embedded/result/