0

リンクをクリックすると動的にページに追加するdivがあり、そのdivにiframeを書き込みます。

// 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で開きますが、問題はありませんが、（FirefoxとIE）の下部には、高さbodyと同じサイズの大量の空白があります。#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

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 に答える
0

本当の原因：

cssも動的にロードしていましたが、ダイアログが開く前にcssが完全に処理されていなかったため、問題が発生しました...

于 2012-06-22T15:06:04.593 に答える