Allow “Open in codepen/jsfiddle” in new tab

On some MDN pages, there is a code example with “Open in codepen” and “Open in jsfiddle” buttons below it. The problem is that clicking this button will load the editor in the same tab, replacing the MDN page. This is not what most developers want, I think. If you’re reading the documentation and want to try out the demo in the editor, you usually don’t want the documentation to be replaced, forcing you to go back and forth between the documentation and the editor.

The only workaround I can think of is to copy-paste the documentation URL into a new tab to load the same page again, and then click the editor button on that page, which is tedious. Could you make those buttons default to opening a new tab, or at least add it as an option?

2 Likes

We’d really like to make this change but the JSFiddle and CodePen APIs both require a POST request. The button you are clicking is submitting a form with a POST request and unfortunately, that cannot be done in a new tab :frowning:

Wouldn’t be possible to set a target="_blank" attribute on the form to achieve the desired effect?

I don’t know if it’s allowed, but it does seem to work: https://output.jsbin.com/xojivag/quiet — clicking on the submit button opens the form’s action URL in a new tab.

Can you point the curious active learner to the code where this api call happens @Stephanie_Hobson?

It works! We’ll change the default behaviour to open in a new tab.

The code change is here for the curious:


It’ll take a day or two to make it to production.

Thanks for having this discussion everyone :slight_smile:
Stephanie.

3 Likes

Wewt! I love it when a plan comes together!

Sheppy