Get HTML code using JavaScript with a URL

Question

I am trying to get the source code of HTML by using an XMLHttpRequest with a URL. How can I do that?

I am new to programming and I am not too sure how can I do it without jQuery.

You may want to look into the problem of the same origin policy...Just search on SO and you will find tons of info. — josh.trow, Jun 16 '11 at 16:44
but is there any other way of going about this thing? like not using xmlhttprequest? with just javascript? — simplified, Jun 16 '11 at 16:47
no. xmlhttprequest and iframes are the only way, and both are limited by same-origin policy. If you want to get around this, the remote server needs to cooperate (by serving as jsonp, or putting a special header on the data it serves) — rob, Jun 16 '11 at 17:28

score 41 · Answer 1 · edited Jul 20 '20 at 15:11

41

Use jQuery:

$.ajax({ url: 'your-url', success: function(data) { alert(data); } });

This data is your HTML.

Without jQuery (just JavaScript):

function makeHttpObject() {
  try {return new XMLHttpRequest();}
  catch (error) {}
  try {return new ActiveXObject("Msxml2.XMLHTTP");}
  catch (error) {}
  try {return new ActiveXObject("Microsoft.XMLHTTP");}
  catch (error) {}

  throw new Error("Could not create HTTP request object.");
}

var request = makeHttpObject();
request.open("GET", "your_url", true);
request.send(null);
request.onreadystatechange = function() {
  if (request.readyState == 4)
    alert(request.responseText);
};

edited Jul 20 '20 at 15:11

Peter Mortensen

30,738
21
105
131

answered Jun 16 '11 at 16:47

Senad Meškin

13,597
4
37
55

@Senad Meskin thanks for your answer, but issit possible to do it with jQuery? i was wondering if there are other methods to do it. – simplified Jun 16 '11 at 16:49
@Senad Meskin thanks. i was trying to write this function in a empty html file that just put the code above in the script tag, however. it seems that the readystate is 1 and didn't get through. do you know why? i have changed to url to already. but it still doesn't work. – simplified Jun 16 '11 at 17:50
1

Does your url points to another server, if so that is the reason, security issue. – Senad Meškin Jun 16 '11 at 17:53
1

@Senad Meskin lets say it's google.com or youtube.com? is it possible? – simplified Jun 16 '11 at 17:54
1

No its not possible, only thing that you can is call your url, and on serverside code call www.google.com and write to response content of google.com – Senad Meškin Jun 16 '11 at 18:06
@Senad Meskin thanks.. i tried putting this in a background.html and it works. probably like you said it's some security issues that does not allow the current domain which is a local html to call out to another domain. but now, i need to extract the meta data from the html code. i do know of a way to do it, but it is not very efficient, i was wondering if there's anyway in javascript to have a efficient way of doing it. – simplified Jun 16 '11 at 18:15
2

Will this work if the source has not set 'Access-Control-Allow-Origin' header? – Saket Kumar Sep 13 '19 at 01:17

score 10 · Answer 2 · answered Jan 16 '20 at 08:33

You can use fetch to do that:

fetch('some_url')
    .then(function (response) {
        switch (response.status) {
            // status "OK"
            case 200:
                return response.text();
            // status "Not Found"
            case 404:
                throw response;
        }
    })
    .then(function (template) {
        console.log(template);
    })
    .catch(function (response) {
        // "Not Found"
        console.log(response.statusText);
    });

Asynchronous with arrow function version:

(async () => {
    var response = await fetch('some_url');
    switch (response.status) {
        // status "OK"
        case 200:
            var template = await response.text();

            console.log(template);
            break;
        // status "Not Found"
        case 404:
            console.log('Not Found');
            break;
    }
})();

score 10 · Answer 3 · edited Jul 20 '20 at 15:14

There is a tutorial on how to use Ajax here: https://www.w3schools.com/xml/ajax_intro.asp

This is an example code taken from that tutorial:

<html>

<head>
    <script type="text/javascript">
        function loadXMLDoc()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
              // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
              xmlhttp = new XMLHttpRequest();
            }
            else
            {
                // Code for Internet Explorer 6 and Internet Explorer 5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "ajax_info.txt", true);
            xmlhttp.send();
        }
    </script>
</head>

<body>
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>

</html>

score 3 · Answer 4 · answered May 28 '21 at 11:03

I had problems with the fetch api and it seams that it always returns promise even when it returns text "return await response.text();" and to handle that promise with the text, it needs to be handled in async method by using .then.

     <script>
                // Getting the HTML
                async function FetchHtml() 
                {
                    let response = await fetch('https://address.com');
                    return await response.text(); // Returns it as Promise
                }
        
        
                // Usaing the HTML
                async function Do()
                {
                   let html = await FetchHtml().then(text => {return text}); // Get html from the promise
                    alert(html);
                }
        
        
                // Exe
                Do();
</script>

score 2 · Answer 5 · edited Jul 20 '20 at 15:21

2

For an external (cross-site) solution, you can use: Get contents of a link tag with JavaScript - not CSS

It uses $.ajax() function, so it includes jquery.

edited Jul 20 '20 at 15:21

Peter Mortensen

30,738
21
105
131

answered Aug 26 '13 at 15:53

otaxige_aol

341
1
4
6

rttss_sahil · Answer 6 · 2021-01-05T13:17:31.847

First, you must know that you will never be able to get the source code of a page that is not on the same domain as your page in javascript. (See http://en.wikipedia.org/wiki/Same_origin_policy).

In PHP, this is how you do it:

file_get_contents($theUrl);

In javascript, there is three ways :

Firstly, by XMLHttpRequest : http://jsfiddle.net/635YY/1/

var url="../635YY",xmlhttp;//Remember, same domain
if("XMLHttpRequest" in window)xmlhttp=new XMLHttpRequest();
if("ActiveXObject" in window)xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.open('GET',url,true);
xmlhttp.onreadystatechange=function()
{
    if(xmlhttp.readyState==4)alert(xmlhttp.responseText);
};
xmlhttp.send(null);

Secondly, by iFrames : http://jsfiddle.net/XYjuX/1/

var url="../XYjuX";//Remember, same domain
var iframe=document.createElement("iframe");
iframe.onload=function()
{
    alert(iframe.contentWindow.document.body.innerHTML);
}
iframe.src=url;
iframe.style.display="none";
document.body.appendChild(iframe);

Thirdly, by jQuery : [http://jsfiddle.net/edggD/2/

$.get('../edggD',function(data)//Remember, same domain
{
    alert(data);
});

]4

ijka5844 · Answer 7 · 2020-07-28T01:34:37.493

-1

Edit: doesnt work yet...

Add this to your JS:

var src = fetch('https://page.com')

It saves the source of page.com to variable 'src'

edited Jul 28 '20 at 01:34

answered Jul 28 '20 at 01:26

ijka5844

45
10

Get HTML code using JavaScript with a URL

7 Answers7

Linked