为什么单击 WP PHP 呈现的带有 target="_blank" 的链接会在新选项卡和当前选项卡中打开？

Question

所以我知道这里有人问过这种问题，但我的问题似乎与其他问题不同。

下面的代码显示，如果有一个 URL 填充它并在新选项卡中打开它，但是，由于某种奇怪的原因，链接会在新选项卡中打开（耶！！）并在当前选项卡中打开（BOO！ ！）。为什么它同时在新标签和当前标签中打开？

我刚刚签入了一个隐身窗口，它也发生在那里，所以它似乎也不是 cookie 问题。

<div class="box span4">
    <?php if( $url1 != '' && $img1 != '' ): ?>
        <a href="<?php echo esc_url( $url1 ); ?>" target="_blank" class="box-link">
            <center><img class="box-image" src="<?php echo esc_url( $img1 ); ?>"/></center>
        </a>
    <?php else: ?>
        <?php if( $img1 != '' ): ?>
            <a class="box-no-url">
                <center><img class="box-image" src="<?php echo esc_url( $img1 ); ?>"/></center>
            </a>
        <?php endif; ?>
    <?php endif; ?>
    <p><?php echo wp_kses( $text1, array( 'br' => array(), 'em' => array(), 'strong' => array() ) ); ?></p>
</div>

要查看此代码的运行情况，请访问http://www.tayloredhomeinspection.com/ 并向下滚动到中间灰色框中带有 InterNACHI 印章的图像，然后单击它（或它下面的文本）。

Answer 1

原因

在 HTML 的 header 部分有一个 script 标签：

<script type="text/javascript" src="http://www.tayloredhomeinspection.com/wp-content/themes/parallax1/elements/lib/js/elements.min.js?ver=4.7.5"></script>

在that file 内部是以下块（未缩小，感谢jsbeautifier.org）：

jQuery(".boxes .box").each(function() {
    var e = jQuery(this).children(".box-link").attr("href");
    jQuery(this).hover(function() {
        if (e && e != "") jQuery(this).css("cursor", "pointer")
    }, function() {
        jQuery(this).css("cursor", "default")
    });
    jQuery(this).click(function() {
        if (e && e != "") window.location = e
    })
});

该代码正在寻找具有 box-link 类的元素（分别为 boxes 和 box 类的元素的子元素）以及何时单击这些元素中的任何一个，它都会将当前选项卡的位置（通过将值分配给window.location）更改为元素的 href 属性（使用类 box -链接）。

该链接（包含 InterNACHI 印章）具有类 box-link 并匹配那些 CSS 选择器：

<div class="boxes">
        <!-- removed first box -->

        <div class="box span4" style="cursor: default; height: 460px;">
            <a href="http://www.nachi.org/" target="_blank" class="box-link">
                <center><img class="box-image" src="./Taylored Home Inspection 719.602.6287_files/internachi_red_gold.png"></center>
            </a>

这似乎允许用户单击父容器中的任意位置（使用class="box"），例如 - 在链接下方的段落上，并且仍然具有单击链接的效果。请参阅下面的屏幕截图中所示的链接和段落之间的区别：

预防

一种快速的解决方案是从该元素中删除该类名（即 box-link）。但是，删除所需的样式...除此之外，如果锚标记具有目标并且它是事件的目标，则可能需要修改（wordpress）JavaScript 以停止更改位置。

更新：

如果从 Cyber​​Chimp Parallax Word Press 主题文档和/或支持中找不到任何帮助，则可以在页面加载后运行更改脚本。下面的代码可以添加到在其他 javascript 文件（包括 elements.min.js）之后运行的任何 javascript 文件中，或内联在脚本标签中（即<script type="text/javascript">jQuery(".boxes .box" ...</script>）。

有人可能会争辩说，这只是一种掩盖功能的技巧，如果主题代码中的实现发生变化，可能会受到影响。

jQuery(".boxes .box").each(function() {
    var e = jQuery(this).children(".box-link").attr("href");
    var target = jQuery(this).children(".box-link").attr('target');
    if (target == '_blank') {
      jQuery(this).off('click');
    }
    jQuery(this).click(function(event) {
      if (e && e != "") {
          if (target == '_blank') {
              window.open( e, '_blank');
          }
          else { 
              window.location = e;
          }
      }
    });
  });

在this jsbin example查看演示

Answer 2

这是我所做的编织工作，似乎可以正常工作。

jQuery(window).load(function(e) {
 if (jQuery(window).width() > 767) {
  setTimeout(function() {
   jQuery("#widget_boxes_container .box").css("height", 
jQuery("#widget_boxes_container").height() - 20)
  }, 500)
 }
 jQuery(".boxes .box").each(function() {
  var e = jQuery(this).children(".box-link").attr("href");
  var target = jQuery(this).children(".box-link").attr("target");
  if (target == "_blank") {
      jQuery(this).off("click");
  }
  jQuery(this).hover(function() {
   if (e && e != "") jQuery(this).css("cursor", "pointer")
  }, function() {
   jQuery(this).css("cursor", "default")
  });
  jQuery(this).click(function(event) {
      if (e && e != "") {
          if (target == "_blank") {
              window.open( e, "_blank");
          }
          else { 
              window.location = e;
          }
      }
    });
 jQuery(".carousel").carousel("cycle")
})

看来我必须将 target="_blank" 保留在 .php 文件中，这应该适用于我在主题中所做的任何更改，并且我已保存文件以防主题更新。