Changing the src attribute of an iframe modifies the history

A few weeks ago I rolled out a feature on the Indeed mobile site that used a modal menu. A coworker noticed that the modal was breaking the back button. Opening and closing the modal was creating entries in the browser’s history.

At first I thought I had missed a preventDefault in a callback somewhere. Nope.

The culprit was an iframe that we were using to track user interactions. If you modify the src attribute, a load event fires inside the iframe. This event bubbles up to the top window, creating a history entry without changing the outermost url.

This fiddle demonstrates the behavior. Click the button and watch your favicon (if you’re in chrome). You’ll see that it spins ever so briefly even though the outermost page does not refresh.

 

 

Anyway, I replaced the old iframe hack with Closure’s `goog.net.XhrIo.send` and it was all gravy. If you’re feeling lucky, download the app and you may end up in the modal test group.

PS: If you’re in a situation where you have to use an iframe, but you don’t want to modify the history, just destroy it and create a new one.