Window.open 打开空白的新标签？答案

【问题标题】：Window.open opening blank new tab?Window.open 打开空白的新标签？
【发布时间】：2017-09-29 08:38:36
【问题描述】：

最奇怪的事情正在发生。此单击事件会打开一个空白的新选项卡，然后在原始选项卡中导航到正确的页面。发生了什么事，我该如何解决？

我检查了检查器中的 target="_blank" 属性，该属性可能是后来添加的，但什么也没有。我在我的代码中搜索了它，什么也没有。因此，window.open 上的 _blank 属性将打开一个空白的新选项卡并导航到同一选项卡中的 url 是没有意义的。

谢谢。

$(".homedepot, .amazon, .walmart").on('click', function() {
                url = $(this).attr('href');
                window.open(url , "_blank");
                trackOutboundLink(url);
            });

    //var path = window.location.path;
                        var trackOutboundLink = function(url) {
                            var loc = function getLocation(url) {
                                var match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
                                 return match && {
                                 href: href,
                                 protocol: match[1],
                                 host: match[2],
                                 hostname: match[3],
                                 port: match[4],
                                 pathname: match[5],
                                 search: match[6],
                                 hash: match[7]
                                }
                            }



                            newURL = loc.protocol + "//" + loc.host;
                            console.log(newURL)


                            ga('send', 'event', 'outbound click', 'click', newURL, {
                                'transport': 'beacon',
                                'hitCallback': function(){console.log("");}
                            });
                        }

标记：

<a class="ilHide" href="<%= product.data["product.buy_amazon"].value[0].text %>"><img class="amazon" style="width:200px; position: relative; right: .5rem;" src="images/amazon2.jpeg" alt="Amazon" /></a>
<a class="ilHide" href="<%= product.data["product.buy_homedepot"].value[0].text %>"><img class="homedepot" style="display:inline;position:relative;" src="images/homedepot.png" alt="Home Depot" /></a>
<a class="ilHide" href="<%= product.data["product.buy_walmart"].value[0].text %>"><img class="walmart" style="width:200px;" src="images/walmart.jpeg" alt="Walmart" /></a>

【问题讨论】：

您的点击事件在img 标签上触发并打开一个新的空白窗口（这就是您告诉它与window.open(url , "_blank"); 做的事情）您的a 标签正在做它应该做的事情并将用户发送到href 中指定的位置
它完全按照你的代码告诉它做的事情。在新标签中打开一个新窗口。然后将我重定向到另一个页面。您应该将 url 放在 window.open 标记中。
你不需要a标签上的href和打开一个新窗口的onClick事件，选择其中一个。

标签： javascript jquery html

【解决方案1】：

我假设您想在新选项卡中导航到锚点 href，同时保留在当前页面中。如果正确，您需要：

preventDefault行动
从parent 元素中获取href

新的点击处理程序：

$(".homedepot, .amazon, .walmart").on('click', function(e) {
    e.preventDefault();
    url = $(this).parent().attr('href');
    window.open(url , "_blank");
    trackOutboundLink(url);
});

【讨论】：