Table of Contents
Inside this article we will see the concept i.e Javascript How To Find All Broken Links On Web page Tutorial. Article contains the classified information about How to check broken links on a web page using javascript.
If you are looking for a solution of finding all broken links inside your website’s web pages, then you can use this concept to your code. You will get the very basic and super easy concept to do this.
Learn More –
- How To Check 404 Not Found URL Status in Javascript Tutorial
- How To Get All h1 Tags From HTML Document in Javascript
- Javascript How To Get All Image Tags From HTML Document
- How To Check MySQL Server Version in Laravel Tutorial
Let’s get started.
Application Programming
Let’s create a folder with name broken-links in your localhost directory. In this project folder, create a file: index.html
Open index.html and write this complete code into it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript How To Find All Broken Links From Web page Tutorial</title>
</head>
<body>
<a id="link1" href="http://example1.com">Link 1</a>
<a id="link2" href="http://example2.com">Link 2</a>
<a id="link3" href="http://example3.com">Link 3</a>
<a id="link4" href="http://example4.com">Link 4</a>
<a id="link5" href="http://example5.com">Link 5</a>
<script>
var all_links = document.getElementsByTagName("a");
for (var i = 0; i < all_links.length; i++) {
var link_tag = all_links[i];
var link_source = link_tag.getAttribute("href");
if (UrlExists(link_source)) {
console.log("Exists");
} else {
console.log("Not Found");
}
}
// User helper function to Check Page Status
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
if (http.status != 404)
return true;
else
return false;
}
</script>
</body>
</html>Concept
Here, you can see we used a helper (User defined function) which checks a URL exists or not.
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
if (http.status != 404)
return true;
else
return false;
}Application Testing
Open your browser.
Next,
Your project URL will be like this.
URL: http://localhost/broken-links/index.html
You will see your output into browser’s console.
We hope this article helped you to learn Javascript How To Find All Broken Links On Web page Tutorial in a very detailed way.
Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.
If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.
