彼らはどうやってこれをするのですか？モーダルブックマークレットとインスタントスクレイピング？

Question

ブックマークレットからポップアップウィンドウを開くようにしたいが、ページはjqueryモーダルのように読み込まれます。つまり、醜いブラウザの境界線がないことを意味します。

例をご覧ください。Amazonはどのようにこのようにしていますか？

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と手動deobfuscated：私は少し持って

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で、AmazonのWebサイトからスクリプトを要求します。

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

をレスポンスのコード（add.js example）の内部では、<table>要素を動的に作成し、人口は、そのページに挿入されています。

「マジック」は、スクリプトが生成されるサーバ側で発生します。必要なすべてのデータは、注入されたJSファイルとともに提供されます。

Answer 2

このコードを読み取るには少し難しいですが、これは、それが何をするか、基本的である：

• は、現在のドキュメント（現在表示しているページ）で<script>を作成し、https://www.amazon.co.uk/wishlist/add.js

にそのソースを設定します

• スクリプトが実行され、実際にグローバルスコープ

• にAUWLBookenGBオブジェクトを作成し、次いで方法showPopover();をW実行されます実際に `window.AUWLBookenGB.showPopover（）;に対応しているw[n].showPopover();です。

ポップアップを示す責任があるshowPopover()方法。

Answer 3

JavaScriptコードは、あなたのページにjsファイル（ウィッシュリストポップアップを作成するために必要）をロードするための<script>タグを作成します。

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

上記のURLは、最終的にポップアップを作成するページにjsファイルを読み込むのに時間がかかりません。最後に、次のURLにアクセスしてポップアップを動的に読み込むためにamazonサーバーを起動します。

秘密は、ポップアップを生成するために必要なコンテンツをどれだけ高速に読み込んで、即座に読み込むべきかということです。