web-dev-qa-db-ja.com

Jqueryでiframeにデータを投稿する方法

Jqueryでiframeにデータを動的に投稿するにはどうすればよいですか。

この場合、本当にIframeにデータを投稿する必要があります。受信したデータはシーケンシャルに返される（バッファされる）ため、$。POSTは使用できません

Jqueryが$ .POSTによって返されたデータを処理するための回避策がある場合は、データを受信します。すごく興味がある！

現時点では、GETSで次のように処理します。

_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が（ob_flush();flush();を使用して）javascriptを挿入できるようにし、終了したらiframeを削除してクリーンアップします。

iframe内から、_window.parent._を使用してメインフレームにアクセスし、次にメインフレームのメソッドを使用します。

これは理想的ですが、GETで動作します。POST？

javascriptphpjqueryhtmliframe
11
Vincent Duprez

わかりましたので、これは明らかに存在しないので、私は独自のソリューションを作成しました。誰かがjQueryのiFrameにPOST=.

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が削除されます。

15
Vincent Duprez

この関数は一時フォームを作成し、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の「名前」属性であり、データはJSオブジェクトです。

data={last_name:'Smith',first_name:'John'}
29
Dr Fred

上記の作業には、ターゲットメソッドを使用するか、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>
2
Sunil Verma