javascript - 使用javascript检查服务器上是否存在html文件

Question

我的 ASPX 代码生成了一些 html 文件，我只是在其中放置了分页链接，例如

<a href="1.html">First</a>&nbsp;|&nbsp;
<a href="3.html">Next</a>&nbsp;|&nbsp;
<a href="1.html">Previous</a>&nbsp;|&nbsp;
<a href="9.html">Last</a>

说如果用户当前在第二页按下 Next 移动到第三页...

现在的问题是当用户多次单击“下一步”按钮并且系统正在进行生成让说第 5 页时，它将显示错误页面。

有没有办法通过 javascript 从 html 检查文件是否存在？请帮助我摆脱这个节目停止问题

Answer 1

您可以使用 ajax 检查文件是否存在

使用 jQuery

$.ajax({
        url:'http://www.example.com/3.html',
        error: function()
        {
           alert('file does not exists');
        },
        success: function()
        {
            alert('file exists');
        }
    });

使用 Javascript

function checkIfRemoteFileExists(fileToCheck)
{
    var tmp=new Image;
    tmp.src=fileToCheck;

    if(tmp.complete)        
        alert(fileToCheck+" is available");        
    else        
     alert(fileToCheck+" is not available");        
}

现在检查文件是否存在或不调用这样的js函数

checkIfRemoteFileExists('http://www.yoursite.com/abc.html');​

Answer 2

我喜欢使用这种类型的脚本

function CheckFileExist(fileToCheck: string) {

    return new Promise((resolve, reject) => {
        fetch(fileToCheck).then(res => {
            if (res.status == 404) resolve(false);
            if (res.status == 200) resolve(true);
            return res.text()
        }) 
    })

}

并使用它

 var exists = await CheckFileExist(link);

Answer 3

• @Sibu 的解决方案存在一个问题：它实际上会下载文件（它可能会很大，浪费流量）
• 在 2021 年，一个不应该在新项目中使用 jQuery
• 原生Promises和Fetch是今天要走的路

<output id="output"></output>

<script>
// create a non-cached HTTP HEAD request
const fileExists = file =>
  fetch(file, {method: 'HEAD', cache: 'no-store'})
  .then(r => r.status==200);

// check the file existence on the server
// and place the link asynchronously after the response is given
const placeNext = file => fileExists(file).then(yes => output.innerHTML = 
   (yes ? `<a href="3.html">Next</a>` : '')
);

// place the "next" link in the output if "3.html" exists on the server
placeNext('3.html');
</script>