Как они это делают? Модальный букмарклет и мгновенный соскоб? - PullRequest
Новая
       18

Как они это делают? Модальный букмарклет и мгновенный соскоб?

4 голосов
/ 26 февраля 2012

Я хочу, чтобы пользователь открыл всплывающее окно из букмарклета, но страница загружается как модальный 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()}())

Украшено и отключено вручную: 

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();
    }
}())

Ответы [ 3 ]

1 голос
/ 26 февраля 2012

Этот код javascript создает тег <script> для загрузки файла js (необходимого для создания всплывающего списка желаний) на страницу, на которой вы находитесь.

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

Приведенный выше URL-адрес не требует много времени для загрузки файла js на страницу, которая в конечном итоге создает всплывающее окно.Наконец, он попадает на сервер Amazon, чтобы динамически загрузить всплывающее окно, посетив следующий URL.

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

Секрет в том, как быстро вы можете загрузить контент, необходимый для создания всплывающего окна, поэтому он должен загружаться мгновенно.

1 голос
/ 26 февраля 2012

Я немного де-запутал код, см. Пост вопроса.

Скрипт запрашивает скрипт с веб-сайта amazon со следующим URL: 

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

Внутри кода ответа (пример add.js ), элемент <table> динамически создается и заполняется, а затем вставляется на страницу.

«Волшебство» происходит на стороне сервера, где генерируется скрипт. Все необходимые данные подаются с внедренным файлом JS.

0 голосов
/ 26 февраля 2012

Этот код немного сложен для чтения, но в основном это то, что он делает:

  • создайте <script> в текущем документе (странице, которую вы просматриваете в настоящее время) и установите его источник на https://www.amazon.co.uk/wishlist/add.js

  • скрипт выполняется и фактически создает объект AUWLBookenGB в глобальной области действия

  • , затем метод showPopover(); выполняется с w[n].showPopover();, который фактически соответствует `window.AUWLBookenGB.showPopover ();

Метод showPopover() отвечает за отображение всплывающего окна.

...