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

Question

我想让用户从一个bookmarklet打开一个弹出窗口，但是页面加载起来就像一个jquery模式--这意味着没有丑陋的浏览器边框。

请看这里的示例，Amazon是如何做到这一点的？

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

此外，他们显然是为了获取信息而抓取页面，但页面加载几乎是瞬间的，他们是不是以某种方式缓存了用户阅读的每个页面？他们还能如何做到这一点呢？我尝试过simple-html-dom，但它远不是即时的

这是JS Amazon的用法：

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>元素，然后将其插入页面中。

“魔法”发生在服务器端，脚本就是在这里生成的。所有必要的数据都与注入的JS文件一起提供。

Answer 2

该javascript代码创建一个<script>标记，将js文件(创建愿望列表弹出窗口所需)加载到您所在的页面中。

http://www.amazon.co.uk/wishlist/add.js?loc=your-page-url&b=AUWLBookenGB:1703

上面的url不会花太多时间将js文件加载到最终创建弹出窗口的页面中。最后，它通过访问以下url来访问amazon服务器以动态加载弹出窗口。

https://www.amazon.co.uk/wishlist/add?u=your-page-url&t=your-page-title

秘诀在于，你能以多快的速度加载生成弹出窗口所需的内容，这样它就可以立即加载。

Answer 3

这段代码有点难读，但它基本上是这样做的：

• 在当前文档(您当前正在查看的页面)中创建一个<script>并将其源设置为脚本执行，并实际创建一个对象到全局作用域
  • ，然后使用实际对应于`window.AUWLBookenGB.showPopover();

  的w[n].showPopover();执行方法showPopover();

方法showPopover()负责显示弹出窗口。