如何在同一窗口中打开Wordpress“预览”链接？

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 Stack Exchange上，但这可能是Stack Overflow的一个更好的问题，因为它与编码更直接相关。

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

Wordpress有一个框，允许您保存，预览和发布您的博客帖子：

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

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.

我的问题是我似乎无法弄清楚如何在当前窗口中打开该链接。注意target =“wp-preview”部分。我试图摆脱那个部分，但我认为可能有另一个函数绑定到该元素，因为我真的无法让它在当前的选项卡/窗口中打开，即使在取消绑定它并删除目标属性之后。

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.

我正在运行以下代码作为插件的一部分（您可以在下面看到有关如何将其作为插件运行的更多信息），但也可以将其复制并粘贴到Chrome或Firefox的控制台中以自行测试甚至修改Wordpress。请注意，在测试时，您需要在自己的函数中使用jQuery而不是$，因为Wordpress使用noconflict方法，但是下面的代码工作正常。

//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:

这是添加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.

这是我最终得到的结果。如果我单击“测试”链接，它将在同一窗口中打开。如果单击“预览”链接，它仍会在新选项卡中打开。

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

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.

ps：我正在使用你可能不了解jQuery的方法检查绑定事件，我没有找到任何绑定，我相信Wordpress主要使用jQuery所以我不认为这会绑定到另一个事件处理程序

2 个解决方案

#1

You could try this:

你可以试试这个：

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

Works from the Chrome Inspector.

适用于Chrome Inspector。

#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.

如果你还包括第二部分，在页面加载运行后等待500ms，它似乎按预期工作。

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
}

#1