Come riconoscere un aggiornamento Ajax in un IFRAME di terze parti
-
11-12-2019 - |
Domanda
Quando la pagina lo carica include un IFRAME di terze parti (leggi: uploader del file).Selezionando un file, fai clic sul pulsante "Avvia caricamento" e una volta completato il caricamento Io ricevo un messaggio "Grazie - caricamento completo".
- .
-
Non c'è una risposta Ajax (che conosco).
-
La terza parte mi consente di specificare il messaggio.Posso anche aggiungere ... a quel messaggio.
Una volta completato il caricamento, è necessario aggiornare un input nascosto con l'upload_file_id che conosco dall'inizio.Cosa voglio prendere / usare se il messaggio "Carica completa" / momento / evento.Ma la dinamica-ness della pagina è in qualche modo nuova per me e potrei usare un po 'di supporto.
Grazie in anticipo.
Soluzione
Unfortunately, you wont be able to access any useful properties of the iframe unless it is within the same host/domain as your code. This is a security feature implemented by all current/worthy browsers - called the same-origin or cross-domain policy.
The only options you have of detecting the changes in a third-party iframe are if the third-party code supports sending a message out to the surrounding frame. There are a few ways of doing this, but they need to support it. If they don't, there isn't much you can do. If it were me I would check the following:
- Read the third-party documentation, see if they support triggering any js messages or events
- See if the third-party system offers another way, beside iframe, to implement the same ability.
script tags?
The following code will only work - again - if both sides are of the same domain (the outer frame and the iframe). Otherwise it'll be blocked by the same-origin policy.
<script>
if( window && window.parent && window.parent.iframeSuccess ){
window.parent.iframeSuccess();
}
</script>
Instead you could implement the following which has been designed precisely for the communication between frames. It's a more modern solution so wont work on older browsers - to see what supports it you could read here:
What browsers support the window.postMessage call now?
An example of how to use window.postMessage
- first the code in the outer frame:
function messageListener(event){
/// make sure we only get messages from where we expect
if ( event.origin != "http://the-domain-we-expect-from.com" ){ return; }
/// here you can do what you want depending on the message you get
alert(event.data);
}
/// define for nearly every modern browser
if (window.addEventListener){
addEventListener("message", messageListener, false);
} else {
/// fallback for internet explorer
attachEvent("onmessage", messageListener);
}
Then the code placed in the iframe:
if( window && window.parent && window.parent.postMessage ){
window.parent.postMessage('success',
'http://the-domain-we-are-sending-to.com');
}
for more information you can read here:
https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
image tag?
If they block script tags it's possible they may allow image tags. If this is the case you have a slightly trickier option available which is to embed an image that reports back to a server-side script, which can then flag the event in a database...
<img src="http://mysite.com/image-that-is-actually-a-script.php?id=user-id" />
however to get your javascript to notice this event you will need some sort of polling system that is constantly checking your server-side database from your js (via ajax or websockets) - and you will need to be able to uniquely identify the user on both sides (yours and the third-party) with an id of some sort. So this method is really only possible if the third-party system allows you to insert the user id (or some other unique user information) into the message shown to the user. This is pretty much a last fallback if you have no other option.