Get current post ID of customizer preview window

Question

Is there any way to get information about the current page displayed in the preview window via the customizer API?

I need to obtain page information on initial customizer load and whenever a link in the preview window is clicked such as if it's an archive page, or singular post and post ID etc.

I've tried to grab page information by looking at the body class of the preview page but this doesn't quite work. Every time you click a link in the preview window it shows the CSS classes of the previous page:

wp.customize.bind( 'ready', function() {
    api.previewer.bind( 'ready', function() {
        var previewBodyClass = document.querySelector('#customize-preview iframe').contentWindow.document.querySelector('body').className;
        var previewBodyClassArr = previewBodyClass.split(" ");
        console.log(previewBodyClassArr);
    } );
} );

This approach is a bit of a hack anyway. I'm hoping that page info gets passed to the customizer API for consumption.

Answer 1

I got this working by instead sending a custom event from the preview window to the customizer panel every time the preview window does a full page refresh, or the URL changes (and on initial customizer load).

I can send any data I require about the current page via this event. At the moment I'm still just focussing on the body classes but I'll no doubt update this to include more comprehensive information on the current page (via localized data).

Binding to the custom event allows me to show/hide controls in the customizer panel and also show notifications (very useful) depending on the current page and certain post meta fields if we're on a singular post.

Here's the basic code to send a custom event from the preview window with body class data, and then bind to it via the customizer panel.

Customizer preview window JS:

( function( $, api ) {
  'use strict';

  $( function() {
    api.preview.bind( 'active', function() {
      var bodyClass = document.querySelector('body').className,
          bodyClassArr = bodyClass.split(" ");

      api.preview.send( 'custom-event', bodyClassArr );
      console.log('Sent!');
    } );
  } );
}( jQuery, wp.customize ) );

Customizer panel JS:

( function( $, api ) {
    'use strict';

    wp.customize.bind( 'ready', function() {
        wp.customize.previewer.bind( 'custom-event', function( data ) {
            console.log('Data from preview window: ', data);
        } );
    } );
}( jQuery, wp.customize ) );

Output: