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

你可以让javascript观察者测试文件是否存在，然后使用show and hide或jquery attr来显示你的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

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

以下是我将使用的PHP版本：

style.css

试一试，看看它是怎么回事。

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>

仅当href文件存在时才显示链接

5 个答案: