单击链接时页面淡出，mailto: 链接除外

Question

在下面的代码中，我淡出任何页面，然后在单击任何标签时淡入新页面。但是，在某些情况下，我们不希望在单击时淡出页面，例如，当标签设置为通过 target="_blank" 从外部打开时。下面的代码反映了这一点并且运行成功。

但是，我不确定如何实现的一件事是防止 link 包含 mailto: 引用时淡出，因为显然这是为了打开邮件客户端而设计的 window.所以我不希望页面淡出？

谢谢。

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        window.location.reload();
    }
});

(function($) {
    if (window.history) {
        $(window).on('popstate', function() {
            $("body").show();
        });
    }

    // When links are clicked
    $(document).on("click", "a", function() {
    var $link   = $(this);
    var $href   = $link.attr("href");
    var $target = $link.attr("target");

        // If link exists
        if ($href) {
            // Fade out all links unless set to open in external window target="_blank"
            if ($target !== "_blank") {
                $("body").fadeOut(250, function() {
                    history.pushState($href, null, null);
                    window.location.href = $href;
                });
                return false;
            }
        }
    });

    // On page load, fade in
    $(document).ready(function() {
        $("body").fadeTo(250, 1);
    });
}(window.jQuery));

Answer 1

只需勾选 link url:

if($href.indexOf('mailto:') === 0){
  //the url starts with mailto:
  //it is an email link
}

更具体到您的用例，扩展检查 _blank:

的 if 语句

if ($target !== "_blank" && $href.indexOf('mailto:') !== 0) {
  //...
}

Answer 2

对于包含 mailto: 引用的 link，只需更改代码中的这一部分

if ($href) {

有了这个

if ($href && $href.indexOf('mailto:')!==-1) {

或者检查这个 fiddle 演示 :not 的用法。在您的情况下，不要忘记使用 event.preventDefault() 作为打开邮件客户端 window.

的 mailto links

Answer 3

一个非常优雅的方法是使用 css 属性的强大功能 select 或者并通过验证，所以你只需要这个：

$(document).on('click','a[href]:not([href^=mailto],[target="_blank"])',function(){
     $("body").fadeOut(250, function() {
         history.pushState(this.href, null, null);
         window.location.href = this.href;
     });
     return false;
})

这是 "magic" 发生的地方：a[href]:not([href^=mailto],[target="_blank"])（已更新以包含 "has href" 子句

我只 select 链接 href 不以 mailto 开头并且没有 target="_blank"

有关属性的更多信息 select或：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

单击链接时页面淡出，mailto: 链接除外

Page fadeOut when links are clicked, except mailto: links

javascript

mailto

jquery