網站製作學習誌

問題描述

現在 CSS 排版技術越來越盛行，很多網頁設計師為更精準地控制頁面呈現效果，都會使用 reset.css 來將 HTML 元素在瀏覽器的預設呈現效果給移除 (例如 YUI 的 reset.css 或 Eric Meyer 的 reset.css ) 。

雖然這個技術很好用，但在需要讓客戶自訂畫面的專案上就會遇到一個問題：如何讓客戶的 HTML 呈現出瀏覽器原本預設的效果？

像 YUI 有提供一個 base.css ，可以稍微幫我們將 HTML 元素回復原本的呈現方式。但我們有時只是需要在畫面上一小部份轉換為原來的效果，這時就勢必得修改 base.css ，在它的各項元素定義前加上某區塊的 class 或 id ；不過這不是一個好選項，因為大多數狀況我們還是沒辦法百分之百讓畫面呈現它原本的樣子。

解決方案

其實用 iframe 就可以幫我們解決這個問題。

步驟很簡單：

• 建立一個動態 iframe 。
• 將原本的 html 內容指定給 iframe 的 document 。
• 把 iframe 高度調整至和 html 內容一般高。

這裡我用 jQuery 來實作囉。

建立一個動態 iframe

假設我們的 html 內容已經放在 div.htmlContent 這個區塊中，我們可以用以下程式來動態建立一個 iframe ，並將它 append 在 div.htmlContent 中。當然也別忘記把原來的內容清掉：

$(function () {
    var $iframe = $('<iframe src="about:blank" width="100%" height="300" frameborder="0"></iframe>');
    var $htmlContent = $('div.htmlContent');
    var html = $htmlContent.html();
    $htmlContent.html('');
    $htmlContent.append($iframe);
}

這裡要注意一點，就是 iframe 的高度一定要設定一個大於 0 的整數值，不然等一下 IE 在自動調整高度時會出問題。 (別問我為什麼...我也是自己試出來的 Orz)

至於 iframe 的來源，我們設定為 about:blank 就好，也就是瀏覽器預設的空白頁。

將原本的 html 內容指定給 iframe 的 document

在建立好動態的 iframe 之後，我們要先等它將內容載完。在載完之後，我們就可以將原來的 html 放到 iframe 裡的 docuement 物件的 body 中。

    $iframe.load(function () {
        var iframeDocument = getIframeDocument($iframe.get(0));
        $(iframeDocument.body).html(html).css({ margin: '0', padding: '0' });
    });

這裡用到了一個自訂函式 getIframeDocument ， 它可以幫我們取得 iframe 裡的 document 物件，而且是跨瀏覽器的：

function getIframeDocument(iframeObject) {
    if (iframeObject.contentWindow) {
        return iframeObject.contentWindow.document;
    } else if (iframeObject.contentDocument) {
        return iframeObject.contentDocument.document;
    }
    return null;
}

註：getIframeDocument 暫時不支援 Google Chrome 和 Safari 。

把 iframe 高度調整至和 html 內容一般高

接著我們要調整 iframe 的高度，讓它能完整呈現出 html 的內容。

在 html 載入完畢後，body 的 offsetHeight 就會是我們所需要的內容高度：

    $iframe.load(function () {
        var iframeDocument = $.wacow.getIframeDocument($iframe.get(0));
        $(iframeDocument.body).html(html).css({ margin: '0', padding: '0' });

        setTimeout(function () {
            var bodyHeight = iframeDocument.body.offsetHeight + 20;
            $iframe.height(bodyHeight);
        }, 0);
    });

這裡有個小技巧，就是重新指定 html 內容時， load 事件並不會被觸發，所以我們要利用 setTimeout 來確定 html 已經全部加載完畢 (讓它跳離到另一個執行空間) 。

到這裡就大功告成啦~謝謝收看~