So erkennen Sie ein AJAX-Update in einem Drittanbieter-IFRAME
-
11-12-2019 - |
Frage
Wenn die Seite lädt, enthält sie eine Drittanbieter-IFRAME (Lesen: Datei-Uploader).Ich wähle eine Datei aus, klicken Sie auf die Schaltfläche "Hochladen starten", und sobald der Upload abgeschlossen ist, bekomme ich ein "danke - hochladen komplette" Nachricht.
-
Es gibt keine Ajax-Antwort (dass ich weiß).
-
Die dritte Partei ermöglicht es mir, die Nachricht anzugeben.Ich kann dieser Nachricht auch hinzufügen.
Wenn der Upload abgeschlossen ist, muss ich einen versteckten Eingang mit dem Upload_File_ID aktualisieren, den ich von Anfang an kenne.Was ich fangen, wenn ich fangen / verwenden möchte, wenn die Nachricht / Ereignis "Laden Sie die vollständige" an.Aber die dynamische Seite der Seite ist für mich etwas neu und ich könnte etwas Unterstützung verwenden.
Vielen Dank im Voraus.
Lösung
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.