使用HTML和JavaScript检查多个URL状态

以下是一个使用HTML和JavaScript实现的网页示例，当用户访问网页时，会依次访问给定的URL，并返回每个URL的状态。\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>URL状态检查</title>\n <script>\n function checkURLs() {\n var urls = ["http://a.url", "http://b.url", "http://c.url", "http://d.url"];\n var results = [];\n\n for (var i = 0; i < urls.length; i++) {\n var xhr = new XMLHttpRequest();\n xhr.open("GET", urls[i], false);\n xhr.send();\n\n results.push({\n url: urls[i],\n status: xhr.status,\n statusText: xhr.statusText\n });\n }\n\n displayResults(results);\n }\n\n function displayResults(results) {\n var resultContainer = document.getElementById("result-container");\n resultContainer.innerHTML = "";\n\n for (var i = 0; i < results.length; i++) {\n var result = results[i];\n var resultElement = document.createElement("div");\n resultElement.innerHTML = "<b>URL:</b> " + result.url + "<br>" +\n "<b>Status:</b> " + result.status + "<br>" +\n "<b>Status Text:</b> " + result.statusText + "<br><br>";\n resultContainer.appendChild(resultElement);\n }\n }\n </script>\n</head>\n<body>\n <button onclick="checkURLs()">检查URL状态</button>\n <div id="result-container"></div>\n</body>\n</html>\n\n\n在上面的示例中，我们定义了一个checkURLs函数，该函数会依次访问给定的URL，并将每个URL的状态存储在results数组中。然后，我们使用displayResults函数来显示结果。在HTML部分，我们创建了一个按钮，当用户点击按钮时，会调用checkURLs函数，并将结果显示在页面上的result-container元素中。\n\n请注意，由于浏览器的安全策略限制，您可能无法直接访问跨域的URL。如果您在本地测试时遇到问题，请确保您的URL是有效的，并尝试在服务器上运行该代码。