jQuery를 사용하여 IFRAME에 데이터를 게시하는 방법

Question

jQuery의 iframe에 데이터를 동적으로 게시하려면 어떻게해야합니까?

이 경우 IFRAME에 데이터를 게시해야합니다. 수신 된 데이터가 순차적으로 반환되기 때문에 $ .post를 사용할 수 없습니다 (버퍼링).

데이터를 수신 할 때 jQuery 핸들 데이터를 $ .post로 반환 할 수있는 해결 방법이있는 경우. 난 정말 궁금해!

현재 나는 그것을 다루고있다.

var iframe = $('<iframe style="display:none;"></iframe>');
$( "body" ).append(iframe);
iframe.attr('src','server.php?type=getFolders&inode='+nodeData.inode).load(function(){$(this).remove()});

이것은 기본적으로 임시 iframe을 생성하고 PHP에 JavaScript를 주입합니다 (사용 ob_flush();flush(); ) 데이터를 반환하는 동안 데이터가 완료되면 Iframe을 제거하여 정리합니다.

Iframe 내에서 나는 메인 프레임에 액세스합니다. window.parent. 그런 다음 메인 프레임의 방법입니다.

이것은 이상적이지만 Get과 함께 작동합니다. 어떻게 게시물 로이 작업을 수행 할 수 있습니까?

Answer 1

좋아, 이것이 분명히 존재하지 않으므로, 나는 내 자신의 솔루션을 만들었습니다. 누구든지 jQuery의 iframe에 게시하려는 경우 여기에서 공유합니다.

JS 함수/ 클래스 유사 :

function iframeform(url)
{
    var object = this;
    object.time = new Date().getTime();
    object.form = $('<form action="'+url+'" target="iframe'+object.time+'" method="post" style="display:none;" id="form'+object.time+'" name="form'+object.time+'"></form>');

    object.addParameter = function(parameter,value)
    {
        $("<input type='hidden' />")
         .attr("name", parameter)
         .attr("value", value)
         .appendTo(object.form);
    }

    object.send = function()
    {
        var iframe = $('<iframe data-time="'+object.time+'" style="display:none;" id="iframe'+object.time+'"></iframe>');
        $( "body" ).append(iframe); 
        $( "body" ).append(object.form);
        object.form.submit();
        iframe.load(function(){  $('#form'+$(this).data('time')).remove();  $(this).remove();   });
    }
}

그런 다음 임시 iframe에 양식을 보내야 할 때 :

var dummy = new iframeform('server.php');
dummy.addParameter('type','test');
dummy.addParameter('message','Works...');
dummy.send();

이것은 server.php 예제 파일입니다.

if($_POST[type] == 'test') 
{
    header( 'Content-type: text/html; charset=utf-8' );
    echo '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>';
    echo str_pad('',4096); //fill browser buffer

    for($i = 0; $i < 10; $i++)
        {
            echo '<script type="text/javascript">window.parent.console.log(\''.$_POST[message].'\');</script>';
            ob_flush(); flush();
            usleep(350000);
        }
}

그리고 결과는 예상대로 다음과 같습니다.

메인 프레임의 콘솔은 PHP가 여전히 실행중인 경우에도 350ms가 즉시 시작하는 문자열 'Works ...'를 출력합니다.

PHP가 덩어리를 보내면 마무리가 끝나면 임시 양식과 임시 Iframe을 제거합니다.

Answer 2

이 기능은 임시 양식을 작성한 다음 jQuery를 사용하여 데이터를 보냅니다.

function postToIframe(data,url,target){
    $('body').append('<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>');
    $.each(data,function(n,v){
        $('#postToIframe').append('<input type="hidden" name="'+n+'" value="'+v+'" />');
    });
    $('#postToIframe').submit().remove();
}

대상은 Target Iframe의 '이름'attr이고 데이터는 JS 객체입니다.

data={last_name:'Smith',first_name:'John'}

Answer 3

대상 방법을 사용하거나 위의 작업에 Ajax를 사용할 수 있습니다.

<form action="..." target="an_iframe" type="post">
    <input type="text" name="cmd" placeholder="type a command here..." />
    <input type="submit" value="Run!" />
</form>
<iframe id="an_iframe"></iframe>