Come posso passare informazioni a un iframe tramite Posta in ASP.NET?
-
05-07-2019 - |
Domanda
Vorrei passare informazioni a un iframe via posta. (Potrebbe essere jquery o javascript che esegue il post, non importa davvero).
Le informazioni non possono essere inviate tramite querystring poiché non ho accesso per cambiare il modo in cui è la pagina introdotta dall'iframe.
Questi dati determineranno il layout del contenuto nell'iframe, quindi come posso farlo in modo che dopo l'invio del post l'iframe venga aggiornato? (eventualmente aggiornare?)
Soluzione
Ho scritto un post di blog su come farlo con jQuery per caricare un file usando un iframe nascosto. Ecco il codice:
Ecco l'HTML per il modulo:
<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>
Il DIV in cui consentire a jQuery di creare l'iframe è possibile nasconderlo con un piccolo CSS:
<div id="iframe" style="width:0px height:0px visibility:none">
</div>
Il DIV in cui mostrare i risultati del callback:
<div id="textarea">
</div>
Il codice 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>
Ho usato un'app php come questo uploader.php per fare qualcosa con il file:
<?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);
?>
C'è più di quello che ti serve, ma illustra il concetto in jQuery.
Altri suggerimenti
Non ho il codice a portata di mano, ma il mio team lo ha realizzato esclusivamente in Javascript. Come ricordo, è andato qualcosa del genere:
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
}
}