CodePen messing up back button

[KevinWorkman]

On pages that have a CodePen, opening a CodePen causes the back button to close the CodePen instead of going back a page.

This is a minor annoyance, and might be on CodePen's side, but if it can be fixed than it should be fixed.

[humblelad]

I am not able to repro it. Is this fixed ?
I went here-https://happycoding.io/tutorials/javascript/jquery to see codepen. There is only option for "edit on codepen" at top right.

[jeremydouglass]

I think (?) this old issue referenced a fullscreen view for the CodePen embed that doesn't exist anymore...?

[KevinWorkman]

Hey sorry, I should have been more specific.

I'm talking about the "Run Pen" button that's embedded in many tutorials:

You can click that to show the code running directly in the tutorial.

However, if I then click the back button (at least in chrome), it closes the pen instead of actually navigating back a page.

Is that not what happens for y'all?

[jeremydouglass]

Oh -- yes, that does happen for me -- sorry I misunderstood.

I think you may be stuck with that, because the CodePen embed is an iframe, and run pen changes the iframe contents. Now your mouse focus is inside the iframe because of the click, so when you issue a browser back command, the frame contents go back... I think that's just what iframes do.

[humblelad]

Oh that. I guess we can just click <- (back twice)
☺️ though that's a bad way to fix things.
Actually @jeremydouglass even if we click outside the box after running the codepen, the same happens.

[jeremydouglass]

even if we click outside the box after running the codepen, the same happens.

Yes -- each iframe advance adds an action to the back queue.

Try going to a page with multiple pens and clicking three of them. Three iframes load a new page. Click back three times. The iframes go back in reverse order, 3, 2, 1. I believe that iframes (and frames) do this by design, even without embeds / JavaScript.

[jeremydouglass]

You might (totally untested) be able to modify the codepen loadbutton like this:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

in effect, preventing each codepen load button from storing history when the codepen iframe loads new contents. Then the last history event on the stack will still be the correct HappyCoding page.

https://stackoverflow.com/a/13451971/7207622

see also: https://stackoverflow.com/questions/35395485/change-url-without-refresh-the-page