只有当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

这是可能的，只要文件都在相同的协议，域和端口的页面被查看。

例如，你可以做一个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 2

我认为@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>

Answer 3

我个人会使用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 4

你可以做一个javascript观察者测试文件是否存在，然后使用show和hide或jquery attr来显示你的href或hide em

Answer 5

您可以使用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');
  },
})