dynamic iframe in ui.dialog_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-22 11:01 出处：网络

I\'m trying to dynamically create an iframe in my dialog and I have it working but not really because I only works sometimes here is the code

I'm trying to dynamically create an iframe in my dialog and I have it working but not really because I only works sometimes here is the code

 function test(obj){
    if($('#wa').length === 0){ // check if we have already created iframe and dialog
        $('body').append('<div id="wa"></div>'); //add a div for the the iframe to go into
        $("#wa").dialog({  //apply a ui dialog
            autoOpen: false,
            bgiframe: false,
            modal: true,
            autoResize: true,
            buttons: {
                Submit: function() {
                    $('#iframe').contents().find('#f').submit();
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
           }    
        });
    }

    $('#iframe').remove();
    var $frame = $('<iframe id="iframe" width="100%" height="325"></iframe>');
    $('#wa').append($frame); // add iframe to created div
     var tm2 = setTimeout( function() {//apply content to iframe
        var doc = $frame[0].contentWindow.document;
        var $body = $('body',doc);
        $body.html('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+
        '<html xmlns="http://www.w3.org/1999/xhtml">'+
        '<head>'+
        '<title>test iframe</title>'+
        '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'+
        '<meta http-equiv="Content-Language" content="en-us" />'+
        '<form name="f" id="f" action="https://example.com" enctype="application/x-www-form-urlencoded" method="post">'+
            '<fieldset>'+
                '<label>test1:</label>'+
                '<input type="text" name="test1" value="" size="15" class="required"/>'+
                '<label>test2:</label>'+
                '<input type="text" name="test2" value="" size="15" autocomplete="off" class="required" />'+
                '<input type="submit" value="Login" />'+
            '</fieldset>'+
        '</form></body></html>');
    }, 1 );

    $("#wa").dialog('open');//open the dialog
 }

 $('body').append('<input type="button" id="test" value="test" />');
 $('#test').click(functi开发者_StackOverflowon(){
    test();
 });

There is a Frame Dialog Plug-in available... http://plugins.jquery.com/project/jquery-framedialog