Question

我正在尝试编写一些代码，在加载新内容时（通过ajax）用占位符替换旧内容。

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

在ajax请求 - 响应周期中，我想用“加载”消息或图像替换目标div的内容。

到目前为止，这很简单......

然而，在某些情况下，目标很小，而其他目标很大。在这两种情况下，我都不希望更改目标div的大小或显示滚动条。如果加载消息或图像需要被剪裁，那就这样吧。

'target'div的签名（id，class，style）在整个过程中必须保持不变，我不能在目标div上设置宽度+高度。

我不想依赖于收到新内容时执行的其他代码。

如何使用基本的javascript / dhtml和/或prototype-js来解决这个问题。

谢谢，p。

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');

替换div的内容而不改变大小或滚动

2 个答案: