为什么在新标签和当前标签中点击WP PHP呈现的目标=“_ blank”的链接？

Question

所以我知道这里已经提出了这样的问题，但是我的问题似乎与其他问题不同。

下面的代码显示，如果有一个URL填充它并在新选项卡中打开它，但是，由于某些奇怪的原因，链接在新选项卡中打开（YAY !!）并在当前选项卡中打开（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的标题部分有一个脚本标记：

<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 查找元素（具有类 box 和 box 的元素的子元素）以及何时单击任何这些元素，它会将当前选项卡的位置（通过为window.location指定值）更改为元素 href 属性的值（使用类框链路）。

该链接（包含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文件中，这应该适用于我在主题中所做的任何更改，并且我会在主题更新时保存文件。