DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript 實現廣告後加載 可加載百度谷歌聯盟廣告 原創
Javascript 實現廣告後加載 可加載百度谷歌聯盟廣告 原創
編輯:關於JavaScript     

  本文主要介紹一種新的廣告後加載的方式,支持自定義HTML廣告、百度聯盟廣告和谷歌聯盟廣告。這種方式在頁面加載完成後執行,不影響內容的顯示,對用戶更加友好。

  我們在網站上放置廣告,最簡單的方法就是把JS代碼,插入指定的位置,這樣帶了後果就是,頁面按照順序加載,偶爾一條廣告代碼卡住,整個頁面都會卡住,給用戶帶來的體驗是極差的。

  那麼怎麼解決這種問題呢?先說一下原理,在我們的頁面上先預留一些占位符,為了不影響頁面內容的加載,我們在頁面的底部引入JS處理,逐個把占位符替換成相應的廣告。

下面我們看具體的實現步驟:

一、在頁面上放置占位符,其實就是一個span標記

復制代碼 代碼如下:
<span id="ads_one" class="jbTestPos"></span>
<span id="ads_two" class="jbTestPos"></span>
<span id="ads_three" class="jbTestPos"></span>

二、編寫獨立的JS腳本代碼:jbLoader.js

復制代碼 代碼如下:
jbMap = window.jbMap || {};
function jbViaJs(locationId) {
    var _f = undefined;
    var _fconv = 'jbMap[\"' + locationId + '\"]';
    try {
        _f = eval(_fconv);
        if (_f != undefined) {
            _f()
        }
    } catch(e) {}
}
function jbLoader(closetag) {
    var jbTest = null,
    jbTestPos = document.getElementsByTagName("span");
    for (var i = 0; i < jbTestPos.length; i++) {
        if (jbTestPos[i].className == "jbTestPos") {
            jbTest = jbTestPos[i];
            break
        }
    }
    if (jbTest == null) return;
    if (!closetag) {
        document.write("<span id=jbTestPos_" + jbTest.id + " style=display:none>");
        jbViaJs(jbTest.id);
        return
    }
    document.write("</span>");
    var real = document.getElementById("jbTestPos_" + jbTest.id);
    for (var i = 0; i < real.childNodes.length; i++) {
        var node = real.childNodes[i];
        if (node.tagName == "SCRIPT" && /closetag/.test(node.className)) continue;
        jbTest.parentNode.insertBefore(node, jbTest);
        i--
    }
    jbTest.parentNode.removeChild(jbTest);
    real.parentNode.removeChild(real)
}
 
jbMap['ads_one'] = function() {
 document.writeln('<a href="http://www.jb51.net/" target="_blank"></a>');
};
 
jbMap['ads_two'] = function() {
 document.writeln('<scr'+'ipt type="text/javascript">var cpro_id = "u336546";</script><script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></scr'+'ipt>');
};
 
jbMap['ads_three'] = function() {
 document.writeln('<scri'+'pt async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scri'+'pt><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-1247620132145618" data-ad-slot="2253650178" data-override-format="true" data-page-url="http://www.jb51.net"></ins><scri'+'pt>(adsbygoogle = window.adsbygoogle || []).push({});</s'+'cript>');
};

注意:jbMap是放置廣告的數組,數組的Key和Span標記的ID是對應的,我們可以在這個JS中按照這種形式添加自己的廣告。這種廣告加載方式,支持自定義的HTML廣告、百度聯盟廣告、谷歌聯盟廣告,這裡都給大家做了演示。

三、在頁面底部中引入JS,調用jbLoader加載廣告

復制代碼 代碼如下:
<script type="text/javascript" src='js/jbLoader.js'></script>
<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>
<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>
<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

注意:格式必須是如上這種格式,有幾個占位符,就添加幾個<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

不要問小編為什麼要這樣調用,其實小編也研究了一下:
1.第一次jbLoader()是為了寫標記,第二次jbLoader(true)是為了替換標記。
2.用兩個<script>是為了第二次調用能取到相應的元素。
3.有幾個占位符就寫幾行script是為了互不影響,各顯示各的。

總之:好多大網站都在使用這種方法,大家放心用好了。至此,就完成了頁面廣告後加載的調用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved