为什么在新选项卡和当前选项卡中单击WP PHP呈现的链接,其中target ="_ 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>

在该文件中是以下块(未缩小,感谢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查找元素(具有类框和框的元素的子元素),当单击任何元素时,它会更改当前选项卡的位置(通过为窗口指定值). location)到元素的href属性的值(使用class box-link).

该链接(包含InterNACHI印章)具有类框链接并匹配那些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;
          }
      }
    });
  });

请参阅此jsbin示例中的演示