StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHandle a callback when the calling frame (and execution context) has disappeared
text
Body
copied!<p>Let us assume you have two frames, A and B (or a page with an iframe). A has a function <code>foo()</code> in it that, when complete, calls a callback. A script in B calls <code>foo()</code> from A, but before it completes (and calls the callback from B), B's src is replaced entirely, so that the callback no longer has an execution context. In most browsers, this will generate some sort of error.</p> <p>Is there any way to detect that the callback is from a runtime that no longer has execution context, and thus should not be called?</p> <p>Here is the wrapping page:</p> <pre><code><html> <head> <script> var load = function() { document.getElementById("link").onclick = function(){ document.getElementById("iframe").src = "test-exec-context-frame-src.html"; return(false); }; }; var frameLoad = function(cb) { // kill the frame and then callback document.getElementById("iframe").src = "http://www.google.com"; cb(); }; </script> </head> <body onload="load();"> <div>This is the first div, click <a id="link" href="#">here</a> to start</div> <iframe id="iframe"></iframe> </body> </code></pre> <p></p> <p>And here is the iframe src page:</p> <pre><code><html> <head> <script> var load2 = function() { document.getElementById("link").onclick = function(){ top.frameLoad(function(){ console.log("I am done"); }); }; }; </script> </head> <body onload="load2();"> <div>This is the internal frame. Click <a href="#" id="link">here</a> to force the callback.</div> </body> </code></pre> <p></p> <p>Click on the link in the first page, the iframe is loaded with the second source page. Click on the link in the second page, it calls top.frameLoad with a callback. Before the callback is run, the iframe src gets changed to www.google.com, destroying the execution context for the callback. The callback is run and creates an error.</p> <p>How can we check the execution context of the callback - or perhaps of the calling function - before attempting to execute the callback?</p> <p>(Ignore the formatting, use of global vars, the fact that jquery would handle it better than document.getElementById, etc. This is just a test.)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload