0

我有一个 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）的底部是大量与#loginDialog高度大小相同的空白区域。

我不确定原因，因为一切都按顺序显示 - 但似乎当 div 附加到主体时，它正在那里渲染 - 增加主体高度，然后在对话框中打开。

编辑

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

如果我这样做，它会起作用 - 所以 callIframe 中有什么东西？：

callIframe();
alert('works when interrupted by alert');
openLoginDialog();

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

4

3 回答 3

3

它可以用更简洁的方式编写，我认为这是造成问题的 url

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

示例演示。

更新：根据您的需要，这里有一个更新的小提琴。

于 2012-06-21T20:24:21.797 回答
0

真正的原因：

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

于 2012-06-22T15:06:04.593 回答
0

问题似乎是由于未关闭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>');
于 2012-06-21T20:16:53.083 回答