كيفية التعرف على تحديث AJAX في الطرف الثالث iFrame
-
11-12-2019 - |
سؤال
عندما تقوم بتحميل الصفحة، يتضمن الطرف الثالث iFrame (قراءة: تحميل الملفات).يمكنني تحديد ملف، انقر فوق الزر "ابدأ التحميل" وبمجرد إكمال التحميل، أحصل على رسالة "شكرا لك تحميل".
-
لا يوجد استجابة ajax (التي أعرفها).
-
يسمح لي الطرف الثالث بتحديد الرسالة.يمكنني أيضا إضافة ... إلى تلك الرسالة.
بمجرد اكتمال التحميل، أحتاج إلى تحديث إدخال مخفي باستخدام Upload_File_ID الذي أعرفه من البداية.ما أريد التقاطه / استخدامه إذا "تحميل" رسالة / لحظة / لحظة.لكن NESSIC-NESS من الصفحة جديدة إلى حد ما بالنسبة لي ويمكنني استخدام بعض الدعم.
شكرا مقدما.
المحلول
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.