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...




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&copy; </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>

Click here to run this code via Sololearn






Comments

Post a Comment

Popular posts from this blog