解決使用BloggerAds廣告拖垮部落格載入時間的問題

最近我的網誌加入的BloggerAds的廣告,但是卻發現我的網頁載入速度變的異常的慢,本來我以為大概是我的Server的關係,但是久了情況似乎沒有改善,於是我就先把我的廣告拿掉,結果速度就變快了,於是我只好將廣告的那一段JavaScript獨立出來在另外一個html檔來執行,相信網路上大家也可以找到很多篇相關的文章,沒錯就是用iframe,但是我要稍為教大家用一下跟網路上教的不太一樣的方法。

在網路上的文章大都教寫死高度的方式,但本人認為此方法不太妥,萬一廣告的高度如果調大或調小,又要進來改一次程式,這實在是太不符合經濟效益了,我教大家另外一種方法,也是先前兩篇文章有說到的方式請參閱【IFrame在非IE瀏覽器指定Src及動態改變高度的問題】和【iframe頁面呼叫主視窗的JavaScript Method】,廢話不多說請大家自行參考下面的語法。
首先是在主畫面(要呈現廣告的位置)加上iframe的定義和要呼叫的JS Methods
<iframe frameborder="0" id="iframebloggerads" marginheight="0" marginwidth="0" scrolling="no" style="border: none;" width="100%"></iframe>

var iframe = document.getElementById("iframebloggerads");

if (iframe.src == "") {
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    iframeDocument.open();
    iframeDocument.writeln('');
    iframeDocument.close();
    iframe.src = 'lib/bloggerads.htm';
}
//此方法的目的是要給iframe呼叫用來改變目前高度的
function SetIframe() {
    if (document.getElementById) {
        if (iframe && !window.opera) {
            if (iframe.contentDocument && iframe.contentDocument.body.offsetHeight) {
                iframe.height = iframe.contentDocument.body.offsetHeight;
            } else if (iframe.Document && iframe.Document.body.scrollHeight) { //IE
                iframe.height = iframe.Document.body.scrollHeight + 30;
            }
        }
    }
}
接下來在另外一支html檔(廣告實際呈現的畫面)加上下面語法,注意這裡我有用到jQuery,使用時要記得引用jquery.js
<head>
    <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![ CDATA{
        $(function () {
            //這一句就是重點
            window.parent.SetIframe();
        });
        //]]>
    </script>
</head>
<body style="margin: 0; padding: 0;">
    <script src="http://js1.bloggerads.net/showads.aspx?blogid=20110817000082&amp;charset=utf-8" type="text/javascript"></script>
</body>

留言