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 //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 : //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 : //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 : [//jsfiddle.net/edggD/2/
$.get['../edggD',function[data]//Remember, same domain
{
alert[data];
}];
]4
If for some odd reason, you wanted to view the source code of another page without having to actually browse to that page and click
“page view source,” you can use JavaScript to do so. In the example below, I use the “window.prompt[]” function, to prompt the user for a web page whose source code they would like to see. That function returns the value of the input. We then use the “window.location” method to open up that URL in the browser, but we pre-pend the URL with ‘view-source:’, which achieves the same result as manually browsing to that page, and clicking: “page view source”. [Note:
As of this writing, this only works in Chrome and FireFox]
As you can see, the second argument to the window.prompt[] method is the default text that we want to appear in the text box. But what if the user accidentally deletes “//” or simply ignores it, entering something like “google.com”? No problem. We first use the JavaScript “substring[]” method to check to see if the first seven characters of the return value are: “//”. If so, great; we just use the return value as is. If it is not, we pre-pend that value with “//”, and we are all set.
Example # 1:
varmyLoc=window.prompt['Please enter a web site address','//']; getHttp= myLoc.substring[0, 7]; if[getHttp=="//"] { finalUrl=myLoc; }else{ finalUrl= '//'+myLoc; } window.location='view-source:'+finalUrl; |
Summary
There may not be too many scenarios in which you need to do this, but it is handy to know now. You never know if, down the road, you might need some kind of variation on this functionality.
Helpful Links
//www.w3schools.com/jsref/obj_location.asp
//www.w3schools.com/jsref/met_win_prompt.asp
//www.w3schools.com/jsref/jsref_substring.asp
Created: December-23, 2021
- Use
XMLHttpRequest[]to GetHTMLCode With a URL - Use
jQueryto GetHTMLCode With a URL
One can easily see the web page’s source code using browser dev tools.
But the interesting feature that JavaScript provides us is that we can get the source code of a different webpage on our page without having to visit that page. This post shows various methods of achieving this.
Use XMLHttpRequest[] to Get HTML Code With a URL
XML HTTP Request [XHR] mainly serves to retrieve data from a URL without refreshing the page. So they can be used to get the HTML code from a different page.
function makeHttpObject[] {
if["XMLHttpRequest" in window]return new XMLHttpRequest[];
else if["ActiveXObject" in window]return new ActiveXObject["Msxml2.XMLHTTP"];
}
var request = makeHttpObject[];
request.open["GET", "/", true];
request.send[null];
request.onreadystatechange = function[] {
if [request.readyState == 4]
console.log[request.responseText];
};
In the above example, we first make the HTTP object an HTTP request.
Then we initialize and send the get request using open[] and send[] methods. We print the HTML code when the response becomes available.
Use jQuery to Get HTML Code With a URL
jQuery.ajax[] is used to perform asynchronous HTTP requests. It takes as an argument the URL to send requests and settings [a set of key-value
pairs].
$.ajax[{ url: '/', success: function[data] { console.log[data]; } }];
In the above example, we pass the URL for the HTTP request, and if the request is a success, we print the data returned [i.e., the HTML code for the webpage].
Note
The above solutions don’t work for cross-domain requests.