Capturing a website using javascript

Question

I saw similar questions, and the answers were not quite like me. Since this question is a little different, I ask again - I hope you agree that this is not a duplicate.

What I want to do: Create an image showing the contents of my own site, as seen by the user (in fact, by each specific user).

Why I want to do this: I have code that identifies places on the page where the user mouse fluctuates for a considerable period of time (ppl tends to move the mouse to areas of interest). I also record click locations. They are written as X / Y coordinates. relative to the upper left corner of the page

Note. This is done only for users who conduct usability testing.

Ideally, I would like to take a screenshot, and then use the server side to overlay mouse data on the image (access points, mouse path, etc.).

The problem is that the content of the page is very dynamic (not so much during display, but during creation on the server side) - depending on the type of user, roles assigned, etc. whole fields may be missing - and the rest of the layout will be adjusted accordingly - therefore, there is not a single “correct” screenshot for the page.

Option 1 (which feels a bit unpleasant): will go around the DOM and serialize it and send it back to the server. Then I open the corresponding browser and de-serialize the DOM. This should work, but difficult to automate. I suspect there will also be problems with relative URLs, etc.

2. , , ( , , ). , - - 2. AJAX.

NB: (, , )

, (, javascript). - , , , ( // URL-).

Answer 1

"" :

( jQuery)

var pageStructure = {};

$("#header, #navigation, #sidebar, #article, #ad, #footer").each(function() {
    var elem = $(this);
    var offset = elem.offset();
    var width = elem.outerWidth();
    var height = elem.outerHeight();
    pageStructure[this.id] = [offset.left, offset.top, width, height];
});

pageStructure , .

Answer 2

, , , - , - . , , ... , $100, , , , , , , . , ....

, Google : http://www.trymyui.com/ , , , , , , /. script, . , , , , .

.

Answer 3

IMO, it's not worth reinventing the wheel. Just buy an existing solution such as ClickTale.

http://www.clicktale.com/