javascript - 如何自动调整弹出窗口或模式对话框的大小以进行内容更改

Question

我有一个 iframe，它可以出现在 jQuery 模态对话框、弹出窗口中，或者只是作为页面的一部分。这个 iframe 内容的高度可以随着元素的出现和消失而改变，我需要包含 iframe 以及适用的模式对话框或弹出窗口，以根据需要更改 height 以“只是对'内容的大小。

实现此目标的最佳方法是什么？你可以看到我需要这种行为的页面here .

最好有一些事件会在任何内容发生变化时自动触发，这样我就不必在任何地方运行某种方法来使元素出现或消失。

谢谢。

Answer 1

我认为你需要做类似的事情

/* creating jQuery special event to catch DOM content change */
var changeInterval;

jQuery.fn.contentchange = function(fn) {
    return this.bind('contentchange', fn);
};

jQuery.event.special.contentchange = {
    setup: function(data, namespaces) {
        var self = this,
            $this = $(this),
            $originalContent = $this.html();
        changeInterval = setInterval(function(){
            if($originalContent != $this.html()) {
                    $originalContent = $this.html();
                    jQuery.event.special.contentchange.handler.call(self);
            }
        },500);
    },
    teardown: function(namespaces){
        clearInterval(changeInterval);
    },
    handler: function(event) {
        jQuery.event.handle.call(this, {type:'contentchange'})
    }
};
/* end */

/* assigning our special event handler to iframe */ 
var iframe = $('iframe[src="login.htm"]')[0],
    iDoc = iframe.contentWindow || iframe.contentDocument; // we love IE
if (iDoc.document && iDoc.document.body) {
    $(iDoc.document.body).bind('contentchange', function(){
        var currentHeight = $(this).outerHeight();
        // we need to change iframe height as well as dialogs height
        iframe.height = currentHeight;
        $('#loginDialog').height(currentHeight);
    })
}    
/* end */

抱歉，我自己还没有测试过，但(我觉得)它会起作用。希望对您有所帮助。