Javascript get html source of current page

Question

Is it possible to get the html of the page with all modifications made by the user (see below)?

Nội dung chính Show

Everyone knows you can view the source code of any web page. But you can also use JavaScript to grab the source code of a different page, and show it in yours
Helpful Links
How do I get the current page in HTML?
Can JavaScript read the source of any Web page?
What is. innerHTML in JavaScript?
How to add HTML using innerHTML?

For example, if text has been entered into a textarea, or a checkbox has been chosen, that should be reflected in the html as well. My reason for wanting to do this is to take a "screenshot" of the user's page.

The answers below that are a variation of jQuery('html'), do not reflect changes made by the user.

asked Jul 3, 2013 at 15:09

7

If you're wanting a screenshot, you should consider a tool such as html2canvas. Just pulling the HTML isn't going to get you the input fields.

Another SO thread along these lines.

Other answers will get you the HTML, specifically, but without the inputs' values

$('html').html();

answered Jul 3, 2013 at 15:27

RichardRichard

6,0664 gold badges31 silver badges48 bronze badges

1

You can use jQuery:

var html = $('html')

answered Jul 3, 2013 at 15:11

Rene PotRene Pot

24.2k7 gold badges67 silver badges90 bronze badges

7

Adapting upon the other answers. Prior to obtaining the HTML, you could loop though all the input elements and manually set the value property, this would then be reflected in the HTML:

$('a').click(function(e){
    setValueProperties();
    var html = getHtml();
    alert(html);
});

function setValueProperties(){
    $('input').each(function(){
       $(this).attr("value", $(this).val()); 
    });
}

function getHtml(){
    return document.documentElement.outerHTML;
}

Here is a working example

And here is an example that supports checkboxes

NOTE: You may need to refine this function for your exact needs, but hopefully it will get you on track for what you need.

answered Jul 3, 2013 at 15:31

musefanmusefan

47.2k21 gold badges130 silver badges177 bronze badges

If you have a field named "field":

var field = document.getElementById("field");
fieldvalue= field.value;

If you have a checkbox, the operation is literally the same. Hope this was helpful.

answered Jul 3, 2013 at 15:14

Everyone knows you can view the source code of any web page. But you can also use JavaScript to grab the source code of a different page, and show it in yours

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 “http://” 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: “http://”. If so, great; we just use the return value as is. If it is not, we pre-pend that value with “http://”, and we are all set.

Example # 1:

varmyLoc=window.prompt('Please enter a web site address','http://');

getHttp= myLoc.substring(0, 7);

if(getHttp=="http://")

{

finalUrl=myLoc;

}else{

finalUrl= 'http://'+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

http://www.w3schools.com/jsref/obj_location.asp

http://www.w3schools.com/jsref/met_win_prompt.asp

http://www.w3schools.com/jsref/jsref_substring.asp

How do I get the current page in HTML?

Answer: Use the window. location. href Property location. href property to get the entire URL of the current page which includes host name, query string, fragment identifier, etc.

Can JavaScript read the source of any Web page?

As a security measure, Javascript can't read files from different domains.

What is. innerHTML in JavaScript?

The innerHTML property returns: The text content of the element, including all spacing and inner HTML tags. The innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements.

How to add HTML using innerHTML?

Using the innerHTML attribute: To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.

programming javascript Get page HTML JavaScript page link JavaScript get page