我有一个 iframe,它可以出现在 jQuery 模态对话框、弹出窗口中,或者只是作为页面的一部分。这个 iframe 内容的高度可以随着元素的出现和消失而改变,我需要包含 iframe 以及适用的模式对话框或弹出窗口,以根据需要更改 height 以“只是对'内容的大小。
实现此目标的最佳方法是什么?你可以看到我需要这种行为的页面here .
最好有一些事件会在任何内容发生变化时自动触发,这样我就不必在任何地方运行某种方法来使元素出现或消失。
谢谢。
最佳答案
我认为你需要做类似的事情
/* 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 */
抱歉,我自己还没有测试过,但(我觉得)它会起作用。 希望对您有所帮助。
关于javascript - 如何自动调整弹出窗口或模式对话框的大小以进行内容更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1535681/