Javascript检查html文件是否存在[重复]答案

【问题标题】：Javascript check if an html file exists [duplicate]Javascript检查html文件是否存在[重复]
【发布时间】：2017-05-29 05:52:04
【问题描述】：

如何检查文件夹中是否存在 .html 文件？我试图不收到错误“它可能已被移动或删除”。而是显示 notFound.html

<body>
    <header>    
        <form autocomplete="off">
            <input id="3Digits" type="number" min="100" placeholder="3-Digit Code">
            <span style="display:inline-block; width: 15px;"></span>
            <a href="#" id="goButton" onclick="check()">Go</a>
            <hr>
        </form>
    </header>
    <div id="frameDiv">
        <iframe id="srcCC"></iframe>
    </div>
    <script>
        var newLink
        function check() {
        newLink = document.getElementById("3Digits").value + ".html";
            if(newLink == ".html") {
                alert("You forgot to put the 3-Digit Code");
            }
            else {
                LinkCheck(newLink);
            }
        }
        function LinkCheck(url) {

            if(HTML EXISTS) {
                document.getElementById("frameSRC").src = newLink;
            }
            else {
                document.getElementById("frameSRC").src = "notFound.html";
            }
        }
    </script>
</body>

函数 LinkCheck 是我所要求的，所有文件都将位于同一目录中。这是一个小型学校项目，因此将不胜感激！

【问题讨论】：

这将在 Web 服务器上运行还是仅通过文件系统运行？
@kojow7 文件系统
出于安全原因，浏览器限制文件系统访问
不......没有使用服务器来做到这一点。该服务器可以在您的机器上。您可以对浏览器安全设置和浏览器扩展进行一些黑客攻击，这可能会有所帮助，但会阻止这样做
有时人们会“点击快乐”来标记重复的问题。您的问题不是重复的，因为您正在尝试通过本地文件系统查找文件。如果您没有在本地系统上安装 Web 服务器（Apache 或 IIS），那么，不，您将无法执行此操作。允许 JavaScript 检查本地系统上的文件会带来安全风险。如果默认启用，那么您访问的任何网站都可以嵌入 JavaScript 并访问本地计算机上的任何文件。

标签： javascript html

【解决方案1】：

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

function LinkCheck(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

【讨论】：

感谢您的回复！遗憾的是，它没有工作我收到此错误 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated 因为它对最终用户的体验产生不利影响。
@JKaw 设置此http.open('HEAD', url, true);
@DanielH 现在出现此错误“跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。”
@JKaw hm，试试我的解决方案吧

【解决方案2】：

用这个替换你的函数：

function LinkCheck(url) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onload = function(e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        document.getElementById("frameSRC").src = newLink;
      } else {
        document.getElementById("frameSRC").src = "notFound.html";
      }
    }
  };
  xhr.send(null);
}

选项 2：使用 jQuery ajax

    function LinkCheck(url) {
      $.ajax({
        url: url,
        success: function(data) {
          document.getElementById("frameSRC").src = newLink;
        },
        error: function(data) {
          document.getElementById("frameSRC").src = "notFound.html";
        },
      })
    }

【讨论】：

遗憾的是，得到相同的错误代码“跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。”

【解决方案3】：

尝试将您的函数 LinkCheck 替换为：

function LinkCheck(url) {

  const http = new XMLHttpRequest();
  http.onreadystatechange = function() {

    if (this.readyState === 4 && this.status === 200) { // if (HTML EXISTS) 
      document.getElementById("frameSRC").src = newLink;
    } else {
      document.getElementById("frameSRC").src = "notFound.html";
    }
  }

  http.open('get', url, true);
  http.send();

}

如果这表明存在一些弃用问题，请尝试使用新的 javascript 原生 fetch API：

function LinkCheck(url) {

  fetch(url).then(function(response) {
    if (response.status === 200) {
      document.getElementById("frameSRC").src = newLink;
    } else {
      // this else isn't needed but you can put it here or in the catch block
      document.getElementById("frameSRC").src = "notFound.html";
    }
  })
  .catch(function (err) {
    throw err;
  });  
}

【讨论】：

获取“对于 CORS 请求，URL 方案必须是“http”或“https”。”
如果您收到该 CORS 请求或跨域脚本问题并且您使用的是 google chrome，您可以下载 CORS 扩展程序来阻止它：chrome.google.com/webstore/detail/cors-toggle/… 出现该 CORS 问题是因为您的脚本在本地运行从你的机器
您还可以将其与 allow-control-access-origin 扩展名结合使用，以帮助避免类似问题：chrome.google.com/webstore/detail/allow-control-allow-origi/…
即使启用了该扩展，我仍然收到关于 CORS 的相同错误