反向工程DOM，Javascript事件& “发生了什么”？ [英] Reverse Engineering the DOM, Javascript events & "what's going on"?

问题描述

我正在试图找出Google的实时网页预览的javascript中发生了什么。

如你所见，这些功能实际上已经接近顶端。

所以之后，我决定重载 google.vs .P 和 google.vs.ea 只打印发送给他们的参数：

正如你在屏幕截图中看到的那样，查看参数，两个函数之间的关系变成有点更清楚（但是，当然，还有很多挖掘要做的兔子洞..）

希望这有帮助。

I'm trying to figure out what's going on in the javascript of Google's live page preview.

Why aren't the links I'm adding to the DOM with Javascript clickable? (for a bit more context)

http://chesser.ca/2010/11/google-visual-image-search-hack-marklet/ for the "latest demo"

If you search on google, the results come up on page via live search. Then, if you mouseover one of the magnifying glasses in your result set, a number of things happen.

1. the mousover event for the magnifying glass fires
2. this calls an (as of yet) unknown function with unknown parameters
3. the function makes a cross-site call to google's image results query server
4. those results are stored in google's VS class memory `google.vs.ha`

I've copied the code from google's library and run it through an un-minifier so it's slightly more readable. I've also installed breakpoints in the code through firebug so I can inspect the dom & memory space before during and after I load the page.

My end goal is to be able to replicate the mousover event in code by calling the same function that is called - but - I'm stuck in trying to find the right function. (i'm sure it involves google.vs.Ga(a, b, c) but I'm just not quite there yet.

I know this is pretty much the craziest obsession ever - but - I dunno. Maybe if you're also reading stack on a Sunday you understand :)

What function is being called "On Hover" that sends out the command to get the image requests?

EDIT: There are a few upvotes on this so far tho I thought I'd add a bit more background to anyone wanting to catch up in firebug, you can follow what's happening in javascript at any time.

Is a picture of what google looks like "in memory" you can look at all of the functions and calls and the current state of variables.

You can also actually access and call those variables by putting links in your bookmarks bar. for example javascript:alert(google.base_href) after a search will tell you the URL you're at... and it gets way more exciting from there.

EDIT NUMER 2:

a huge thanks to Matt who managed to crack this in one go :)

 <a href="javascript:
     (function(){
         var all_divs = document.getElementsByTagName('div');
         for (i=0;i < all_divs.length; i++) {
             if (all_divs[i].className == 'vsc') {
                 google.vs.ea(all_divs[i]);
             }
         }
     })();">test all vsc</a>

解决方案

My approach: I ran a profiler and hovered over the results as many times as possible (to hopefully make the function stand out in the profiler results)

The preview function seems to be google.vs.P

It is called with the following arguments:

• DOM element for the result (div.vsc)
• Result info (looks similar to the google.vs.ha store)

The second argument is computed by google.vs.ea, which takes a DOM element as its parameter.

I assume that, since it takes the element as its only parameter, this is probably the function called on hover.

So the hover listener probably looks something like this:

document.addEventListener('mouseover', function (event) {
    if (/\bvsc\b/.test(event.target.className)) {
        console.log('preview!');
        google.vs.ea(event.target);
    }
}, false);

Explanation

As requested below, here's a bit more info

I ran the profiler that ships with Webkit Inspector in Chromium. After hovering the results several times, the profiler results looked like this:

As you can see, the functions did in fact reach near the top.

So after that, I decided to overload google.vs.P and google.vs.ea to just print the arguments that were sent to them:

As you can see in the screenshot .. looking at the arguments, the relationship between the two functions becomes a bit more clear. (But, of course, there's still plenty of digging to be done down that rabbit hole..)

Hope this helps.

这篇关于反向工程DOM，Javascript事件& “发生了什么”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！