替換div的內容而不更改大小或滾動

Question

我正在嘗試編寫一些代碼，以便在新內容加載時（通過ajax）用占位符替換舊內容。

<div id="target">
...
</div>

在ajax請求-響應周期中，我想用“加載”消息或圖像替換目標div的內容。

到目前為止，這很簡單...

但是，在某些情況下，目標較小，而在其他情況下，目標較大。 無論哪種情況，我都不希望目標div的大小改變或滾動條出現。 如果加載消息或圖像需要剪切，那就這樣吧。

在整個過程中，“目標” div的簽名（id，類，樣式）必須保持相同，並且我無法在目標div上設置width + height。

我不想依靠收到新內容時正在執行的其他代碼。

僅使用基本的javascript / dhtml和/或prototype-js，您將如何處理？

謝謝，第

Answer 1

這是我目前能想到的最好的方法：

function loading(id, content)
{
    var elem = $(id);
    if (!elem)
        return;

    var dim = elem.getDimensions();
    var width = dim.width - parseInt(elem.getStyle("padding-left")) - parseInt(elem.getStyle("padding-right"));
    var height = dim.height - parseInt(elem.getStyle("padding-top")) - parseInt(elem.getStyle("padding-bottom"));

    elem.innerHTML = "<div style=\"position:relative; overflow:hidden; padding:0; margin:0; border:0; width:" + width + "px; height:" + height + "px;\">" /*  */
            + content + "</div>";
}

隨時發布更好的解決方案！

Answer 2

// prototype
Object.prototype.updateFixedSizeHtml = function(html)
{
    this.innerHTML = "<div style='width:" + this.clientWidth + "px;height:" + this.clientHeight + "px;overflow:hidden;display:block;padding:0;border:0;margin:0'>" + html + "</div>";
}
// usage
document.getElementById('target').updateFixedSizeHtml('New Content');