Question

I have a page that embeds an iframe from a different domain (for credit card payment). The page loaded in the iframe registers an onbeforeunload handler. That means whenever I try to navigate away from the parent page or hit reload, it asks the user for confirmation. Ok so far.

However, there are supposed to be interactions on the parent page that shall work without invoking the onbeforeunload handler being called in the iframe. Here’s a simplified example:

<iframe src="https://paymentprovider.com/payment"></iframe>
<a href="/abort_payment">Abort payment (fire onbeforeunload)</a>
<a href="/alternative_payment">I don't have a credit card (suppress onbeforeunload)</a>

I cannot use the iframe sandbox because Javascript is required for the iframe to work. I also tried setting the sandbox attribute of the iframe dynamically but that doesn’t seem to work reliably.

The only way I was able to suppress the confirmation box is to remove the iframe in the onclick handler of the links:

iframe = document.getElementById("payment_iframe");
iframe.parentNode.removeChild(iframe)

Do you see any problem with that hack? Is this even supposed to work? Do you know of any better way to accomplish the same?

Thanks

Answer 1

Nope, that’s a pretty good and solid solution, provided javascript is required for it to work in the first place.

(The one edge case you will miss are geeks that have turned off javascript for your page, but not the payment provider, but by the sound of it, they will only get this annoying superflous one extra question, which they were kind of asking for anyway, on some level.)