web-dev-qa-db-ja.com

プレビューが読み込まれたことを知らせるイベントやその他の方法はありますか？

私はWordPressカスタマイザのためのプラグインに取り組んでおり、プレビューアがロードされたときに関数を呼び出す必要があります。プレビューが読み込まれたことを知らせるイベントやその他の方法はありますか？

試してみた場合：

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

私も試してみましたwp.customizer.bind('refresh', function (){

プレビューが読み込まれたときに発生するイベントはありませんか？プレビューアが更新されると、更新イベントが発生します。

何か案は？

plugin-developmentjqueryjavascripttheme-customizer
1
Milli

はい、これはプレビューがいつロードされたかを検出する方法です：

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

このJSコードは、customize_controls_enqueue_scriptsスクリプトをその依存関係としてcustomize-controlsアクションでエンキューする必要があります。

0
Weston Ruter

プレビューが読み込まれたときのカスタマイザAPIイベントが見つかりませんでした。これがiframeのon loadイベントを使った解決策です。

// 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);  
}
0
Milli