javascript - 仅当 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

只要文件与正在查看的页面位于相同的协议(protocol)、域和端口上，就有可能。

例如，您可以执行 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()))
}

一般来说，您需要手动确保链接确实存在，而不是在客户端检查。