logo标签列表

JavaScript检查HTML文件是否存在。

javascripthtml
4
我该如何检查文件夹中是否存在 .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函数，所有文件都将在同一目录中。 这是一个小型学校项目，所以任何帮助都将不胜感激！

浏览器出于安全原因限制了文件系统访问。 - charlietfl
@charlietfl 我明白，但是没有使用XMLHttpRequest来检查链接的HEAD的方法吗？ 如果这是一个初学者问题，对不起，因为我还是新手。 - JKaw
1
没有办法不使用服务器来完成它。但是，该服务器可以在您的计算机上运行。有一些黑客技巧可以通过更改浏览器安全设置和使用浏览器扩展程序来实现，但这样做是不鼓励的。 - charlietfl
1
有时候人们会因为误认为问题是重复的而过于着急地点击标记。你的问题并不是重复的，因为你正在尝试通过本地文件系统定位一个文件。如果你没有在本地系统上安装Web服务器（如Apache或IIS），那么不，你将无法做到这一点。允许JavaScript检查本地系统上的文件将会带来安全风险。如果默认启用了这个功能，那么你访问的任何网站都可以嵌入JavaScript并访问你本地计算机上的任何文件。 - kojow7
@kojow7 谢谢你，我会考虑在我的作业中使用Apache！ - JKaw
显示剩余2条评论
3个回答
2
您可以使用XMLHttpRequest来检查文件是否存在。
function LinkCheck(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}
谢谢回复！可惜，它没有起作用，我得到了这个错误 [Deprecation] 同步XMLHttpRequest在主线程上已被弃用，因为它对最终用户的体验有害。 - JKaw
@JKaw 设置了这个 http.open('HEAD', url, true);。 - Dalin Huang
@DanielH 现在出现了这个错误：“跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。” - JKaw
1
@JKaw 嗯，也许可以试试我的解决方案。 - Dalin Huang
0

请使用以下函数替换您的函数：

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。” - JKaw
-1

尝试用以下代码替换您的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;
  });  
}
获取“URL方案必须为“http”或“https”以进行CORS请求。” - JKaw
如果您在使用Google Chrome时遇到了CORS请求或跨域脚本问题，您可以下载CORS扩展程序来阻止它：https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh?utm_source=chrome-ntp-icon。这个CORS问题是因为您的脚本是从本地计算机上运行的。 - Chris
您还可以结合allow-control-access-origin扩展来帮助避免类似的问题： https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon - Chris
即使启用了那个扩展，我仍然遇到关于 CORS 的相同错误。 - JKaw
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接