Recuperación de respuesta del servidor remoto después de cargar un archivo en iframe

Question

Tengo un formulario que carga un archivo en firame a un servidor remoto. Como resultado, en el servidor de URL de envío, se devuelven los datos json con el resultado de la operación, que mi iframe capta.

{'result': 'true' or 'false'} 

Ahora me gustaría recuperar este json como la devolución de llamada de mi iframe. Sé que necesito jsonp para lograr esto, ya que es una llamada entre sitios. Aquí está mi función con código de ejemplo de IBM' site:

function fileUploadFunction(){  
    var fileUploadForm = $('#file_upload_form'); 
    fileUploadForm.attr('action', uploadURL); 
    fileUploadForm.submit(); 
    $('#upload_target').load(function() { 
     alert("IFrame loaded"); 
      $.getJSON(uploadUrl+"&callback=?", function(data) { 
       alert("Symbol: " + data.symbol + ", Price: " + data.price); 
      }); 
    });   
}; 

Pero aquí surgen algunos problemas. Primero, mi uploadUrl es solo "http: // something /". ¿Lo necesito para admitir llamadas con el sufijo $callback=?
En segundo lugar, el servidor responde solo como resultado de la carga del archivo. Entonces necesito obtener el resultado que está almacenado en mi iframe y no en la url especificada. ¿Cómo resolver esto?

Aquí está el enlace. Observe el iframe oculto dentro del formulario. El resultado del servidor se muestra allí. :

http://ntt.vipserv.org/artifact/

---

EDITAR

He tratado anteriormente:

$('#upload_target').load(function() { 
     var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML; 
     var data = eval("("+ret+")"); 
    }); 

pero plantea 'permisos negados 'error.

Answer 1

una posible solución podría ser establecer el nombre del iframe con js puro. Este nombre podría leerse desde la página primaria de envoltura.

Answer 2

Me parece que su código solicitará uploadURL dos veces: primero, .submit() haga una solicitud POST para cargar el archivo y el resultado se muestra en el iframe como página web; segundo, .getJSON() hacer una solicitud GET y el resultado se ejecuta como javascript en <script>. Te darás cuenta de esto si abres Firebug mientras pruebas tu aplicación.

Dado que dos de las solicitudes son independientes, no tengo idea de cómo .getJSON() le dará información sobre el archivo que acaba de subir con .submit().

Para este tipo de comunicación entre dominios, sugiero usar postMessage; de lo contrario, deberá cambiar el flujo de trabajo de su aplicación para hacer todo lo que esté en el iframe después de que el archivo se haya cargado; p.ej. do <script>alert('Submission accepted');</script> en el iframe.

¿Qué intenta hacer después de que un usuario haya cargado correctamente un archivo?

Answer 3

Esto se hace fácilmente con easyXDM y de hecho hay una publicación en el blog sobre este caso de uso exacto here.

En esencia, lo que hace es usar mensajes entre dominios para retransmitir la respuesta al documento de invocación.

Actualización:Here is a link para esto en acción, la fuente se puede encontrar en github, los archivos tienen el prefijo 'upload_'.

Answer 4

La recomendación easyXDM de Sean es una gran opción (& probablemente debería marcarse como correcta), pero quería sugerir otra solución liviana que no he visto que nadie use.

En caso de que usted está enviando a un iframe oculto en otro dominio & que necesitamos es una respuesta de vuelta (no de dos vías communcation), usted podría pasar un mensaje desde el iframe a los padres mediante una dirección URL roto . He aquí un ejemplo:

1. los padres carga un iframe en el dominio diferente

2. las encuestas de padres myframe.contentWindow.location.href (recibiendo constantemente Permission denied errores ya que la trama está en otro dominio)

3. procesos iframe, luego redirige a

   http://parentdomain.com/pagethatdoesnotexist?{'result':'ok'} 
   

4. iframe consigue un 404 pero ahora el lugar está disponible para los padres

5. el padre lee el mensaje de la URL del marco flotante

Answer 5

literatura no toman en html() en absoluto.

que utilizan

jQuery('.someElement') 

y funcionó para mí. puede guardar el resultado en una variable y la inserta en el nuevo elemento

por ejemplo

var = jQuery('.someElement'); 
jQuery('.newElement').html(var);