Question

我有一个div，我会在点击链接时动态追加到页面，然后将iframe写入该div。

// open login popin
function loginLayer(){
    $(".ui-dialog-content").dialog("destroy");
    callIframe();
    openLoginDialog();
}


// write dialog div & iframe + src to DOM
function callIframe() {

    var iframeURL = "" + loginConfig.iframeSource + "?displayType=" + loginConfig.displayType +"&isSignature=" + loginConfig.isSignature + ""
    $('body').append('<div id="loginDialog"></div>');
    $('#loginDialog').append('<IFRAME id="loginLayer" name="loginLayer" src="' + iframeURL + '" scrolling="no" width="100%"  marginheight="0" marginwidth="0"  frameborder="0"></div>');
}


// open login dialog
function openLoginDialog(){ //open }

运行callIframe后，对话框将打开。

正在发生的事情是用iframe打开对话框，没有问题 - 但是，在body（firefox和IE）的底部是大量的空白，其大小与{{ 1}}身高。

我不确定原因，因为一切都按顺序显示 - 但是看起来当div被附加到身体上时，它会在那里呈现 - 增加身高然后在对话框中打开。

修改

看来这是一个时间问题 - 如果我使用断点逐步执行每个操作，问题就解决了 - 所以有些东西很快就会触发......

如果我这样做，它可以工作 - 所以在callIframe中有什么东西？：

#loginDialog

那么，没有问题。所以，这意味着

Answer 1

它可以用更清洁的方式编写，我认为这是解决问题的网址

function callIframe()
{
    $(".ui-dialog-content").dialog("destroy");
    var iframeURL = loginConfig.iframeSource + "?displayType=" + loginConfig.displayType + "&isSignature=" + loginConfig.isSignature;
    var iframe=$('<iframe></iframe>', {
        src:iframeURL,
        id:'loginLayer',
        name:'loginLayer',
        width:'100%',
        marginheight:0,
        marginwidth:0,
        frameborder:0
    });
    $('<div id="loginDialog"></div>').html(iframe).dialog();
}

callIframe();

An Example Demo.

更新：根据您的需要，here是一个更新的小提琴。

Answer 2

由于未关闭iframe标记，似乎导致了问题。

替换此行

$('#loginDialog').append('<IFRAME id="loginLayer" name="loginLayer" src="' + iframeURL + '" scrolling="no" width="100%"  marginheight="0" marginwidth="0"  frameborder="0"></div>');

到这个

$('#loginDialog').append('<iframe id="loginLayer" name="loginLayer" src="' + iframeURL + '" scrolling="no" width="100%"  marginheight="0" marginwidth="0"  frameborder="0"></iframe>');

Answer 3

真正的原因：

我也动态加载了css，并且在对话框打开之前css没有完全处理，导致问题......

jQuery UI对话框 - 动态div - 函数序列问题

3 个答案: