1

I'm working on a Plugin for the WordPress Customizer and need to call a function when the previewer has loaded. Is there an event or an other method that tells me the preview is loaded?

If have tried:

jQuery(window).load (function() { // Customizer loaded...
   wp.customize.previewer.bind( 'refresh', function() { // doesn't seem to work ?!
      alert ('Previewer has loaded'); 
   }
}

I've also tried wp.customizer.bind('refresh', function (){

Is there no event that gets fired when the preview is loaded? The refresh event gets fired when the previewer gets refreshed.

Any ideas?

4
  • The preview is just an iframe, so jQuery(window).load should suffice, no? Jul 3, 2018 at 12:23
  • The JS Code is been loaded from the plugin with the customize_controls_enqueue_scripts hook. The JS is outside of the frame in the Customizer.
    – Milli
    Jul 3, 2018 at 16:23
  • Sorry I misunderstood, I assumed the script was in the preview frame. Can you try wp.customize.previewFrame.bind( 'load', ...? It's just a shot in the dark based on a quick poke around core, but worth a try I think. Jul 5, 2018 at 14:13
  • wp.customize.previewFrame.bind( 'load', ... gives me a TypeError undefined.
    – Milli
    Jul 7, 2018 at 0:02

2 Answers 2

1

Yes, this is the way to detect when the preview has loaded:

wp.customize.bind( 'ready', function() {
  wp.customize.previewer.bind( 'ready', function( message ) {
     console.info( 'Preview is loaded' );
  } );
} );

This JS code should be enqueued at the customize_controls_enqueue_scripts action with customize-controls script as its dependency.

0

I haven't found an Customizer API event for when the preview has loaded. Here is a solution with the on load event on the iframe:

// Assures that the code gets runned once per load.
var code_has_run = false;

function preview_loader(){
    // When the customizer has loaded the iframe does not
    // exist yet. This checks if the iframe exists.

    if (jQuery('#customize-preview iframe').length > 0){    

        // When iframe/preview has loaded.
        jQuery('#customize-preview iframe').on('load', function (){

            // Wait a little until old frame is removed.
            setTimeout(function (){
                if (code_has_run == false){
                    // Code to be run when preview has loaded and is ready.
                    alert('Preview loaded');
                }
                code_has_run = true;

                // Wait until multiple load events are finished. 
                setTimeout(function(){
                    code_has_run = false;
                }, 1000);
            }, 1000);          
        });
    }
}

jQuery(window).load (function() { // Customizer loaded...

    //Call preview_loader if the preview loads under 500ms.
    preview_loader();

    setInterval(preview_loader, 500);  
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.