Fetch Webpage HTML Source Code

Use this helpful Program to Fetch and view the HTML Source Code from a Website

*Featured Code Created By Calvin

Fetch webpage HTML

Loading...

2017©

Source Code for this Program

HTML with CSS and JavaScript

<!DOCTYPE html>
<html>
<head>
<title>Fetch webpage HTML</title>
<meta name="description" content="Fetch webpage HTML">
<meta name="keywords" content="">
<meta name="author" content="Calvin - https://www.sololearn.com/Profile/4354920">
<meta name="copyright" content="Calvin">
<meta name="date" content="2017-11-02" scheme="YYYY-MM-DD">
<meta name="revised" content="" scheme="YYYY-MM-DD">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/codemirror.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/hint/show-hint.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/bespin.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/eclipse.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/neat.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/hint/show-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/hint/xml-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/addon/hint/html-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/mode/htmlmixed/htmlmixed.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
background-color: #eef;
}

form {
margin: 10px;
}

label {
display: inline-block;
margin-bottom: 10px;
font-size: 1.2em;
}

#url {
display: inline-block;
width: 96%;
font-weight: 600;
padding: 5px;
}

#submit {
width: 100%;
margin-top: 10px;
padding: 5px;
font-weight: 600;
}

#loader {
display: none;
}

pre {
margin: 20px;
width: 80%;
white-space: pre;
}

#outp {
width: 92%;
height: 370px;
margin: 2%;
margin: 10px;
display: none;
}

.copyright {
position: fixed;
bottom: 10px;
right: 10px;
color: #aaa;
font-style: italic;
font-size: 0.8em;
}

#code {
height: 360px;
}

.copyright:after {
content: "Calvin";
}

</style>

</head>
<body>
<form onsubmit="fetchContents(this,event);">
<label>Get webpage HTML</label>
<input type="text" id="url" placeholder="Enter Url" />
<input type="submit" id="submit" value="Get HTML" />
</form>

<div id="loader" style="width:100%; margin-top: 20px;">
<h3 style="text-align:center;"><img src="https://s18.postimg.org/dym8aodc9/loading.gif" style="margin-right: 10px;" />Loading...</h3><br/>
</div>

<div id="code"></div>
<textarea id="outp"></textarea>

<div class="copyright">2017© </div>

<script>

function updateCode(code) {
return CodeMirror(document.getElementById("code"), {
mode: "text/html",
lineNumbers: false,
lineWrapping: false,
tabSize: 2,
// theme: 'bespin', // checkout the themes: http://farhadg.github.io/code-mirror-themes/
theme: 'eclipse',
extraKeys: {"Ctrl-Space": "autocomplete"},
value: code
});
};
</script>
<script>
window.onload = main;
var loader, url;

function main() {
loader = document.getElementById("loader");
url = document.getElementById("url");
}

function getContents(url) {
sourceUrl = url;
var corsUrl = 'https://cors-anywhere.herokuapp.com/';
var apiUrlContest = corsUrl + sourceUrl;
getApi(apiUrlContest, dataRender, 'text');
}

/* Fetch whole webpage to data */
// type=text for getting text/html. default is to get json
function getApi(url, update, type='text') {
// var myHeaders = new Headers();
// var myInit = { method: 'GET',
// headers: myHeaders,
// mode: 'cors',
// cache: 'default' };

fetch(url).then(function(response) {
if(response.ok) {
return type==='JSON'? response.json() : response.text();
}
throw new Error('Network response was not ok.');
}).then(function(data) {
update.call(null,data);
// if(final) offLoader(); // turn off spinner loader aftrer loaded all api
}).catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
});
}

/* process fatched data */
function dataRender(data) {
// console.log(data);
loader.style.display = "none";

outp = document.getElementById("outp");
outp.innerText = data;

var codeM = updateCode(data);
codeM.setSize(350, 400);
}

function fetchContents(el,evt) {
evt.preventDefault();
if(url.value!=="") {
loader.style.display = "block";
getContents(url.value);
}
}
</script>
</body>
</html>

Search This Blog

Free Code Examples