解決使用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>

留言

張貼留言

您好，我是 Lawrence，這裡是我的開發筆記的網誌，如果你對我的文章有任何疑問或者有錯誤的話，歡迎留言讓我知道。