2011-12-05 12 views
5

Ho chiesto How can I make the “Preview Post” button save and preview in the same window? sullo scambio di stack Wordpress, ma questa potrebbe essere una domanda migliore per Stack Overflow poiché è più direttamente correlata alla codifica.Come posso aprire il link "Anteprima" di Wordpress nella stessa finestra?

Wordpress ha una casella che permette di salvare, visualizzare in anteprima e pubblicare il post di blog:

Picture.png http://img854.imageshack.us/img854/7986/picturek.png

Il pulsante "Anteprima" è in realtà un link designato come un pulsante:

<a tabindex="4" id="post-preview" target="wp-preview" 
href="/?p=67&amp;preview=true" class="preview button">Preview</a> 

Il mio problema è che non riesco a capire come ottenere quel collegamento per aprire nella finestra corrente. Si noti la parte target="wp-preview". Sto cercando di sbarazzarmi di quella parte, ma penso che ci possa essere un'altra funzione legata a quell'elemento perché non riesco davvero a farlo aprire nella scheda/finestra corrente, anche dopo averlo slegato e rimosso l'attributo target.

Sto eseguendo il codice seguente come parte di un plug-in (puoi vedere ulteriori informazioni su come eseguire questo come un plug-in di seguito), ma è anche possibile copiarlo e incollarlo nella console di Chrome o Firefox per testare questo te stesso senza nemmeno modificare Wordpress. Si prega di notare che durante i test è necessario utilizzare jQuery anziché $ nelle proprie funzioni in quanto Wordpress utilizza il metodo noconflict, tuttavia il codice riportato di seguito funziona correttamente.

//select the node and cache the selection into a variable 
var $node = jQuery('a.preview'); 

//add a 1px dotted outline to show we have the right element 
$node.css('outline','1px dotted red'); 

//show current target 
console.log($node.prop('target')); 
//show if anything is bound - nothing is for me ('undefined') 
console.log($node.data('events')); 

//remove anything bound to it 
$node.unbind(); 
//set target to _self (current window), just in case 
$node.prop('target','_self'); 
//the remove the target attribute all together 
$node.removeAttr('target'); 

//clone the node 
var $clone = $node.clone(); 
//change the text to new 
$clone.text('new'); 
//remove target from clone 
$clone.removeAttr('target'); 
//unbind the clone 
$clone.unbind(); 
//insert the clone after the original node 
$node.after($clone); 

//show current target - now shows undefined for me 
console.log($node.prop('target')); 
//show if anything is bound - still 'undefined' 
console.log($node.data('events')); 

Questo è come si dovrebbe lavorare il codice in un tema o un plugin:

// set up an action to set a function to run in the wp admin_footer 
add_action('admin_footer','my_admin_footer_script',9999); 

Qui è la funzione che aggiunge il javascript:

//this function can then be used to add javascript code to the footer 

function my_admin_footer_script(){ ?> 
    <script type="text/javascript"> 
    jQuery(function($){ 
    (above js code here) 
    }); 
    </script> 


    <?php 
} 

Questo è il risultato io alla fine con. Se clicco sul link "test", si aprirà nella stessa finestra. Se faccio clic sul link Anteprima, si apre ancora in una nuova scheda.

Picture.png http://img832.imageshack.us/img832/4163/picturesf.png

ps: sto usando il metodo da Things you may not know about jQuery per verificare la presenza di eventi legati, e non ho trovato nulla legato, e credo di Wordpress utilizza principalmente jQuery quindi non credo che questo sarebbe associato a un altro gestore di eventi.

+0

Se utilizzano la delega dell'evento, non sarà possibile utilizzare il trucco dei dati ("eventi"). Penso anche che le versioni più recenti di jQuery potrebbero essersene liberate comunque. –

+0

Ma unbind dovrebbe ancora funzionare in quanto è una funzione nativa, giusto? Per la documentazione di jQuery: '$ ('# pippo'). Unbind(); // Questa versione rimuove i gestori indipendentemente dal tipo.' – cwd

+1

Unbind non funzionerà se hanno usato delegato, poiché in realtà non c'è un evento associato a quell'elemento. Il modo in cui il delegato lavora è che ascoltano gli eventi più in alto nel DOM, quindi interrogano l'oggetto evento per vedere da dove proviene. Se riesci a capire a quale elemento è associato l'evento, puoi utilizzare undelegate. Ad ogni modo, questa è solo una congettura da parte mia. Non so per certo che stiano usando il delegato. –

risposta

3

Si potrebbe provare questo:

jQuery('.preview.button').click(function(e){ 
    window.location.href = this.href; 
    return false; 
}); 

Opere dalla ispettore Chrome.

+0

Funziona anche per me. Bella Kennis – mrtsherman

+0

Grazie. Questa è una soluzione interessante, sembra un po 'un trucco, ma funziona e risponde alla domanda che ho postato. In qualche modo sono comunque molto interessato a sapere perché i metodi standard non funzionano e come trovare ascoltatori di eventi delegati. – cwd

+0

Ho appena provato con una versione diversa di Google Chrome e sembra che 'jQuery ('. Preview.button'). Unbind(). RemoveAttr ('target')' ora funziona ... – cwd

1

La sintassi è corretta ma i tempi sono importanti. Se si esegue solo la prima parte, ma non la seconda parte, è possibile che ciò non funzioni perché sembra esserci un ritardo con l'evento che si lega a questo elemento.

Se si include anche la seconda parte, che attende 500 ms dopo il caricamento della pagina per l'esecuzione, sembra che funzioni come previsto.

add_action('admin_footer','preview_same_window'); 

function preview_same_window(){ ?> 
    <script type="text/javascript"> 

    jQuery(function($){ 

     //first part 
     jQuery('.preview.button').unbind().removeAttr('target'); 

     //second part 
     setTimeout(function(){ 
     jQuery('.preview.button').unbind().removeAttr('target'); 
     },500); 


    }); 

    </script> 
    <?php 
} 
Problemi correlati