javascript - 他们如何做到这一点？模态书签和即时抓取？

Question

我希望用户从小书签打开一个弹出窗口，但页面加载时就像一个 jquery 模式 - 这意味着没有丑陋的浏览器边框。

参见此处的示例，亚马逊是如何做到这一点的？

http://www.amazon.co.uk/wishlist/get-button

此外，他们显然正在抓取页面以获取信息，但页面加载几乎是即时的，他们是否以某种方式缓存用户阅读的每个页面？他们将如何实现这一目标？我试过 simple-html-dom 但它远非即时

这是亚马逊使用的 JS:

javascript:(function(){var w=window,l=w.location,d=w.document,s=d.createElement('script'),e=encodeURIComponent,o='object',n='AUWLBookenGB',u='https://www.amazon.co.uk/wishlist/add',r='readyState',T=setTimeout,a='setAttribute',g=function(){d[r]&&d[r]!='complete'?T(g,200):!w[n]?(s[a]('charset','UTF-8'),s[a]('src',u+'.js?loc='+e(l)+'&b='+n),d.body.appendChild(s),f()):f()},f=function(){!w[n]?T(f,200):w[n].showPopover()};typeof s!=o?l.href=u+'?u='+e(l)+'&t='+e(d.title):g()}())

Beautified并手动反混淆:

javascript:(function() {
    var w = window,
        l = w.location,
        d = w.document,
        s = d.createElement('script'),
        e = encodeURIComponent,
        o = 'object',
        n = 'AUWLBookenGB',
        u = 'https://www.amazon.co.uk/wishlist/add',
        r = 'readyState',
        T = setTimeout,
        a = 'setAttribute',
        g = function() {
            if (d[r] && d[r] != 'complete') {
                T(g, 200);
            } else if(!w[n]) {
                s[a]('charset', 'UTF-8');
                s[a]('src', u + '.js?loc=' + e(l) + '&b=' + n);
                d.body.appendChild(s);
                f();
            } else {
                f();
            }
        },
        f = function() {
            if (!w[n]) {
                T(f, 200);
            } else {
                w[n].showPopover();
            }
    };
    if (typeof s != o) {
        l.href = u + '?u=' + e(l) + '&t=' + e(d.title);
    } else {
        g();
    }
}())

Answer 1

我已经对代码进行了轻微的去混淆处理，请参阅问题的帖子。

脚本从亚马逊网站请求脚本，URL如下:

https://www.amazon.co.uk/wishlist/add.js?loc=<CURRENT URL>&b=AUWLBookenGB

在响应代码 ( add.js example ) 中，一个 <table>元素是动态创建和填充的，然后插入到页面中。

“魔法”发生在服务器端，即生成脚本的地方。所有必要的数据都与注入(inject)的 JS 文件一起提供。