iFrame Developer Toolbar Wrong Page Fix

Some times I have had a client request to use iFrames of other APEX pages. One issue I always have is that when doing this, the developer toolbar points to whatever page is being used in the iFrame.

For example, I declared an iFrame on page 1 of my app which has page 2 of my app as its source:

<iframe src="&P1_IFRAME_URL.">
</iframe>

With P1_IFRAME_URL computed as:

apex_util.prepare_url( 'f?p=' || :APP_ID || ':2:' || :APP_SESSION ||'::NO:::');

So when I run page 1 of my app, my developer toolbar now shows the following:

Notice that the developer toolbar shows "Edit Page 2" instead of "Edit Page 1". This has to do with how APEX renders modal dialogs. They are iFrames, and APEX is picking this up as the same. This can get very annoying when editing a page as you lose "Quick Edit" and the "Edit Page" functionality.

Here is a quick fix:

1. Make a copy of the page template that you want to use and do not unsubscribe your theme.
2. Edit the template. Remove the #DEVELOPER_TOOLBAR# substitution from the Footer.

3.   Assign it to the iFrame page.

That is it! Now your developer toolbar will be fine and pointing to the parent page. Just note that you want to do this only for pages that will be strictly used as iFrames, otherwise you lose the developer toolbar for them if they are used as a standalone page. Shout out to @jrimblas for showing me this tip!