Question

我在Wordpress Stack Exchange上问过How can I make the “Preview Post” button save and preview in the same window?，但对于Stack Overflow来说这可能是一个更好的问题，因为它与编码更直接相关。

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

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

＆＃34;预览＆＃34;按钮实际上是一个设为按钮的链接：

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

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

我将以下代码作为插件的一部分运行（您可以在下面看到有关如何将其作为插件运行的更多信息），但也可以将其复制并粘贴到Chrome或Firefox＆＃39中; s控制台自己测试这个，甚至没有修改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'));

这是您将代码用于主题或插件的方式：

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

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

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

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

ps：我使用Things you may not know about jQuery中的方法检查绑定事件，我没有找到任何绑定，我相信Wordpress主要使用jQuery所以我不会认为这将与另一个事件处理程序绑定。

Answer 1

你可以试试这个：

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

使用Chrome Inspector。

Answer 2

语法正确，但时机很重要。如果您只是执行第一部分而不是第二部分，则可能无法执行此操作，因为看起来事件与此元素绑定存在延迟。

如果你还包括第二部分，在页面加载运行后等待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
}

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

2 个答案: