只有当href文件存在时才会显示链接

Question

我有一个通用的index.html文件，其中包含一个无序的链接列表。如果链接文件存在，我只希望链接可见。

<ul> 
    <li><a class="button" href="text-1.htm">Text 1</a></li> 
    <li><a class="button" href="text-2.htm">Text 2</a></li> 
    <li><a class="button" href="text-3.htm">Text 3</a></li> 
    </ul> 

这是可能的JavaScript，或者我将不得不使用PHP？

Answer 1

我个人会为此使用PHP，但这只是我的意见，如果别人有更好的JS解决方案，请改用它！

这里是PHP版本，我会用：

<?php 
    echo '<ul>'; 
    $files = ['text-1.htm', 'text-2.htm', 'text-3.htm']; 
    foreach($files as $file) { 
     if (file_exists($file)) { 
      $file_clean = explode('.', $file); 
      $file_clean = str_replace('-', ' ', $file_clean[0]); 
      $file_clean = ucfirst($file_clean); 
      echo '<li><a class="button" href="' . $file . '">' . $file_clean . '</a></li>'; 
     } 
    } 
    echo '</ul>'; 
?> 

试一下，看看怎么回事。

Answer 2

如果文件存在，那么你可以做一个观察者的JavaScript测试，然后使用显示和隐藏或jQuery的教师责任观，以显示您的href或隐藏EM

Answer 3

你可以尝试以下使用Ajax这样的事情。

$.ajax({ 
    url: 'website.com/text-1.html', 
    success: function(data){ 
    $('.mySelector').addClass(); //do something like add a class to show link 
    }, 
    error: function(data){ 
    console.log('Does not appear to exist'); 
    }, 
}) 

Answer 4

只要这些文件全部位于与正在查看的页面相同的协议，域和端口上，就是可能的。

你可以例如做一个Ajax请求，看看是否每个文件可以被得到

var buttons = document.querySelectorAll('.button'); 

for (var i = 0; i < buttons.length; i++) { 
    (function(button, http) { 
     http.open('HEAD', button.href); 
     http.onreadystatechange = function() { 
      if (this.readyState != this.DONE || this.status != 200) { 
       button.style.display = 'none'; 
      } 
     }; 
     http.send(); 
    }(buttons[i], new XMLHttpRequest())) 
} 

但是总的来说，你要手动确保链接实际上做存在，而非客户方检查它。

Answer 5

我认为@Ashley是关闭的，但如果链接指向一个巨大的文件，Ajax会尝试在响应之前下载整个文件。在此处，只是头部被请求的页面上每一个链路的Ajax解决方案，然后显示它，如果它是一个有效的链接：

$('a').each(function() { 
 
    $.ajax({ 
 
    context: this, 
 
    type: 'HEAD', 
 
    url: $(this).attr('href'), 
 
    success: function(data) { 
 
     $(this).closest("li").css('display','list-item'); 
 
    }, 
 
    error: function(data) { 
 
     console.log($(this).attr('href') + ' Does not appear to exist'); 
 
    }, 
 
    }) 
 
});

li{ 
 
display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Cnn.svg/2000px-Cnn.svg.png">CNN Logo</a> 
 
    </li> 
 
    <li><a href="https://www.example.com/2000pxa-Cnn.svg.png">Nonsense Link</a> 
 
    </li> 
 
    <li><a class="button" href="text-3.htm">Text 3</a> 
 
    </li> 
 
</ul>