- プレーンHTML埋め込みバナーコード（フラッシュドライブ、写真）。
- iframe挿入。iframe内の個別の要求によってHTMLコードが生成されます。
- jsでdocument.writeを使用すると、上記の2つのメソッドのコードが記述されます。
これらのアプローチに共通するのは、ページの読み込み時にバナーが読み込まれ、何かが遅くなるとページ全体が遅くなることです。 第二に、ページ上に表示しないときにバナーを直接表示するコードを更新すると、大勢の人に問題が発生します。 おそらくこれは重要ではありません。
しかし、これらの2つのポイントを改善することに加えて、タスクにさらに2つの条件を追加して、buysellads.comの外国人同僚がどのようにそれをうまく解決したかを見てみましょう。 バナーゾーンは任意のコードを表示し、バナーのリクエストで他のサービスから情報を送信できる必要があります（たとえば、サイトでのアクションの履歴を保持するサービスのユーザーID）。
そのため、バナーゾーンの正しいコードを生成し、habrakatの下でそれらのハンドラーを記述します。
簡単かつ概略的に説明しますが、実際の例を使用して詳細を説明し、 ここでインスピレーションを得るためのコードを見て、 ここで読むために修正することができます 。
上記の4つの問題を解決するには、いつでも更新できる単一のバナーローダースクリプトを作成する必要があります。このスクリプトは、バナーページに出力する前に、別のサービスに必要な情報を要求し、ページにバナーを表示できます。 Buyselladsは、ウェブマスターに提供するコードを2つに分割することで少し罪を犯したように思えました。 単一のバナーローダースクリプトがヘッダーに接続され、それらが表示される場所がページに配置されます。
この場合、各バナープレースの横にあるブートローダーを実行または呼び出して、ウェブマスターに単一のバナーゾーンコードを表示することもできます。 ページにバナーを挿入する例：
<script type="text/javascript" src="http://digistr.net/static/digistrnet.js"></script> <script type="text/javascript"> var bn = {width: 200, height: 600, param: "value"} _digistrNET.showProducts(bn); </script>
このようなコードは、ページに必要な回数だけ追加できます。 独自のパラメータと、バナーを描画する関数がいくつかあります。 私の場合、特定の商品が表示されます。 私がコメントしているデモはここで見ることができます 。 すべてが可能な限りシンプルかつ迅速に機能します。 リファクタリングと複雑化は、将来のいつか、簡単に更新でき、簡単になります:)
したがって、私（ローダー）がページにまだロードしていない場合、必要なすべての関数を作成します。 ここでは、showProducts関数がすぐに呼び出されますが、バナーは描画されません。 現時点では、ページの読み込み時に表示する必要がある場所のみを覚えておく必要があります。 これを行うには、呼び出し時に、特定のIDを持つ空の非表示のdivを現在の場所に作成します。これにより、後でページ上で見つけることができます。 さらに、簡単にするために、この関数の呼び出しの記録を保持し、すぐにこの場所に表示されるバナーコードを生成します。 他のサービスからのデータはまだないため、これは少しわいせつですが、これまでのところ。 ちなみに、ここではバナーコードは任意です。 スクリプトをロードすることもできます。フラッシュドライブをすぐに挿入するか、ページにテキストを表示するだけです。
Buyselladsでは、このようなdivはすぐにページに配置され、バナープレースのクラスコードがクラスで示され、後で表示するバナーを決定します。 バナーコードはそこで生成されません。その後、JSファイルへのリクエストが続きます。JSファイルはすでにバナーを表示しています。
さらに、ブートローダーでは、ファイルの最後にあるすべての関数の後に、バナーに必要なデータのリクエストが送信されることがわかります。 _loadTrackerがあります。 それに応じて、コールバック関数を呼び出すスクリプトを受信します。これは、 JSONPについて述べているように、個人用の受信データをローダーに提供します。
さらに、window.onloadのコードでは、バナーが表示されます。 したがって、すべてがページにロードされると表示されます。 ここでは、サードパーティのサービスからのデータがまだ到着していない場合にチェックを追加する価値があります。その後、少し待ってからタイマーを再試行する必要があります。 しかし、通常、ページがロードされる前に、このデータはすでに到着しています。 ページがロードされます。 この例では、onloadがスクリプトで要求されたデータのロードを待機しているか、すべてがすぐにロードされたかが興味深いです。 誰が伝えますか？
データを受信すると、showProductsの呼び出し中にコンパイルされたバナーのリスト全体を調べて、以前に残っていたdivの代わりに対応するコードを表示し、以前に欠落していたtrackidパラメーターを置き換えます。
buyselladsの場合、getElementsByClassNameおよびgetElementsByTagNameを使用して、ページに配置されたdivを見つけます。 見た目だけではありません。 しかし、彼らの場合、ブートローダーがそれ自体を起動するのを待つ必要はありません。 このコードは非同期に挿入されます：
<!-- BuySellAds.com Ad Code --> <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = 'http://cdn.buysellads.com/ac/pro.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script> <!-- END BuySellAds.com Ad Code -->
Divは、このローダーからJSを呼び出さずにページにスローされます。
<div id="bsap_23" class="bsaPROrocks" data-serve="CVAE"></div>
これは、調査した例よりも少し涼しいです。 しかし、私の場合は、パラメーターを操作する方が簡単です。パラメーターはページに直接書き込まれるため、多くのパラメーターを使用すると、データベースへのパラメーターの追加リクエストがなくても便利です。 あなたの場合の方法-あなたを選択するには、これは一般的なスキームです。
ローダーの共通コードは、ヘッダーに配置するか（最初のバナーが呼び出される前に）、各パラメーターで呼び出すことができ（キャッシュからすべて同じ）、バナーパラメーターとページ上の表示オプションを渡すための独自のスクリプトを作成します。 ページをロードすると、すべてが表示されます。
まあ、それだけです。 ページ上のバナー。 この方法は、インターネットでレビューされたものの中で最も正しいと思われました。 多くのバナーが怒っているように見えるという事実に加えて、あなたはどう思いますか？