Pregunta

Me gustaría pasar información a un iframe por correo. (Podría ser jquery o javascript que ejecute la publicación, realmente no importa).

La información no se puede enviar a través de la cadena de consulta ya que no tengo acceso para cambiar la forma en que la página introducida por el iframe es.

Estos datos determinarán el diseño del contenido en el iframe, entonces, ¿cómo puedo hacerlo para que después de que se envíe la publicación se actualice el iframe? (¿posiblemente actualizar?)

¿Fue útil?

Solución

Escribí una publicación de blog sobre hacer esto con jQuery para cargar un archivo usando un iframe oculto. Aquí está el código:

Aquí está el HTML para el formulario:

<div id="uploadform">
<form id="theuploadform">
<input type="hidden" id="max" name="MAX_FILE_SIZE" value="5000000" >
<input id="userfile" name="userfile" size="50" type="file">
<input id="formsubmit" type="submit" value="Send File" >
</form>

El DIV en el que permitir que jQuery cree el iframe puede ocultarlo con un poco de CSS:

<div id="iframe" style="width:0px height:0px visibility:none">
</div>

El DIV en el que mostrar los resultados de la devolución de llamada:

<div id="textarea">
</div>

El código jQuery:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#formsubmit").click(function() {
        var userFile = $('form#userfile').val();
        var max = $('form#max').val();
        var iframe = $( '<iframe name="postframe" id="postframe" class="hidden" src="about:none" />' );
        $('div#iframe').append( iframe );

        $('#theuploadform').attr( "action", "uploader.php" )
        $('#theuploadform').attr( "method", "post" )
        $('#theuploadform').attr( "userfile", userFile )
        $('#theuploadform').attr( "MAX_FILE_SIZE", max )
        $('#theuploadform').attr( "enctype", "multipart/form-data" )
        $('#theuploadform').attr( "encoding", "multipart/form-data" )
        $('#theuploadform').attr( "target", "postframe" )
        $('#theuploadform').submit();
        //need to get contents of the iframe
        $("#postframe").load(
            function(){
                iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
                $("div#textarea").html(iframeContents); 
            } 
        );
        return false;
    });
});

</script>

Utilicé una aplicación php como esta uploader.php para hacer algo con el archivo:

<?php

$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
$maxfilesize = $_POST[MAX_FILE_SIZE];

if ($maxfilesize > 5000000) {
//Halt!
   echo "Upload error:  File may be to large.<br/>";
   exit();
}else{
    // Let it go
}

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
   print('File is valid, and was successfully uploaded. ');
} else {
   echo "Upload error:  File may be to large.<br/>";
}

chmod($uploadfile, 0744);
?>

Hay más de lo que necesita, pero ilustra el concepto en jQuery.

Otros consejos

No tengo el código a mano, pero mi equipo lo logró únicamente en Javascript. Según recuerdo, fue algo como esto:

function postToPage() {
  var iframe = document.getElementById('myIFrame');

  if (iframe) {
    var newForm = '<html><head></head><body><form...> <input type="hidden" name="..." value="..." /> </form><script type=\"text/javascript\">document.forms[0].submit();</scrip' + 't></body></html>';

    iframe.document.write(newForm);  //maybe wrong, find the iframe's document and write to it
  }
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top