Question

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

实现这一目标的最佳方法是什么？您可以看到我需要此行为的页面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 */

抱歉，没有为自己测试，但（我觉得）它会起作用。希望它有所帮助。

如何自动调整弹出窗口或模式对话框以更改内容

1 个答案: