他們如何做到這一點？模態書籤和即時刮取？

我想要一個用戶從小書籤中打開一個彈出窗口，但是頁面像jquery模式一樣加載 - 這意味着沒有醜陋的瀏覽器邊框。他們如何做到這一點？模態書籤和即時刮取？

請看這裏的例子，亞馬遜如何做到這一點？

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

而且，他們顯然是刮頁面以獲取信息，但頁面加載幾乎是瞬間，他們在緩存每一頁用戶閱讀不知何故？他們還會如何實現這一目標？我試着簡單的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(); 
    } 
}())

來源

2012-02-26 Darren Sweeney

我有輕微去混淆了代碼，查看問題的帖子。

腳本從亞馬遜的網站請求一個腳本，用下面的網址：

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

裏面的響應代碼（add.js example），是動態創建一個<table>元素和填充，然後在頁面中插入。

「魔術」發生在生成腳本的服務器端。所有必要的數據都與注入的JS文件一起提供。

來源

2012-02-26 13:53:21

此代碼是有點難以閱讀，這基本上是做什麼的：

在當前文檔中創建一個<script>（目前您正在瀏覽的頁面）和它的源設置爲https://www.amazon.co.uk/wishlist/add.js
腳本執行和實際創建AUWLBookenGB對象，以在全球範圍內
那麼該方法showPopover();執行w^ith w[n].showPopover();它實際上對應於`window.AUWLBookenGB.showPopover（）;

方法showPopover()負責顯示彈出窗口。

來源

2012-02-26 13:54:59

該javascript代碼創建一個<script>標籤，用於將js文件（需要創建願望清單彈出窗口）載入您所在的頁面。

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

上述網址並不需要太多的時間來js文件加載到最終創建了一個彈出的頁面。最後，它通過訪問以下URL來命中amazon服務器以動態加載彈出窗口。

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

祕訣是您能夠加載生成彈出窗口所需的內容的速度，因此應該立即加載。

來源

2012-02-26 13:58:42 codef0rmer

codef0rmer - 問題是，祕密是什麼？它是否緩存？我認爲不是因爲這將證明不可能與多標籤的瀏覽器 - 我檢查了一個頁面我加載之前，我添加了小書籤，它仍然是幾乎即時 – 2012-02-26 14:03:20

我的意思是祕密是什麼，只是將必要的數據推送到客戶端儘可能快。它可能是緩存，快速服務器或CDN的東西。當你嘗試在本地運行類似的東西時，它是如何？ – codef0rmer 2012-02-26 15:21:39

最快我可以使用標準的網頁彈出，然後提取圖像等使用簡單的html-dom約4-5秒 - 這在今天的世界是一個很長很長的時間 – 2012-02-26 15:36:57

他們如何做到這一點？模態書籤和即時刮取？

回答

相關問題