How can I get the Wordpress 'Preview' link to open in the same window?

Question

I asked How can I make the “Preview Post” button save and preview in the same window? on the Wordpress Stack Exchange, but this may be a better question for Stack Overflow as it is more directly related to coding.

Wordpress has a box that allows you to save, preview, and publish your blog posting:

The "Preview" button is actually a link styled as a button:

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

My problem is that I can't seem to figure out how to get that link to open in the current window. Notice the target="wp-preview" part. I'm trying to get rid of that part, but I think there may be another function bound to that element because I really can't get it to open in current tab / window, even after unbinding it and removing the target attribute.

I'm running the following code as part of a plugin (you can see more info on how to run this as a plugin below), but it is also possible to copy and paste this into Chrome or Firefox's console to test this out yourself without even modifying Wordpress. Please note that when testing you'll need to use jQuery instead of $ in your own functions as Wordpress uses the noconflict method, however the code below is working fine as is.

//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'));

This is how you would work the code into a theme or 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);

Here is the function that adds the 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
}

This is the result I end up with. If I click the "test" link it will open in the same window. If I click the Preview link it still opens in a new tab.

ps: I'm using the method from Things you may not know about jQuery to check for bound events, and I didn't find anything bound, and I believe Wordpress primarily uses jQuery so I don't think this would be bound with another event handler.

Answer 1

You could try this:

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

Works from the Chrome Inspector.

Answer 2

The syntax is right but the timing is important. If you just do the first part but not the second part it is possible that this will not work because it seems there is a delay with the event that binds to this element.

If you include the second part as well, that waits for 500ms after the page is loaded to run, it seems that it works as expected.

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
}