logo标签列表

使用jQuery / JavaScript测试链接是否为外部链接？

javascriptjquerylocationhref
76

如何测试链接是否为外部链接或内部链接？请注意：

  1. 我不能硬编码本地域名。
  2. 我不能测试"http"。我可能会使用http绝对链接链接到自己的网站。
  3. 我想使用jQuery / javascript，而不是css。

我怀疑答案在location.href中，但解决方案让我无从下手。

谢谢！

你想在链接被点击时检查它还是在页面加载时检查它？ - Elangovan
17个回答
2

/**
     * All DOM url
     * [links description]
     * @type {[type]}
     */
    var links = document.querySelectorAll('a');
    /**
     * Home Page Url
     * [HomeUrl description]
     * @type {[type]}
     */
    var HomeUrl = 'https://stackoverflow.com/'; // Current Page url by-> window.location.href

    links.forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            // Make lowercase of urls
            var url = link.href.toLowerCase();
            var isExternalLink = !url.includes(HomeUrl);

            // Check if external or internal
            if (isExternalLink) {
                if (confirm('it\'s an external link. Are you sure to go?')) {
                    window.location = link.href;
                }
            } else {
                window.location = link.href;
            }
        })
    })
<a href="https://stackoverflow.com/users/3705299/king-rayhan">Internal Link</a>
<a href="https://wordpress.stackexchange.com/">External Link</a>

这是一个值得的答案，它可以有自己的空间... - Vah Run
0

对于那些感兴趣的人，我做了一个三元版本的if块，并检查元素具有哪些类以及附加哪个类。

$(document).ready(function () {
    $("a").click(function (e) {

        var hostname = new RegExp(location.host);
        var url = $(this).attr("href");

        hostname.test(url) ?
        $(this).addClass('local') :
        url.slice(0, 1) == "/" && url.slice(-1) == "/" ?
        $(this).addClass('localpage') :
        url.slice(0, 1) == "#" ?
        $(this).addClass('anchor') :
        $(this).addClass('external');

        var classes = $(this).attr("class");

        console.log("Link classes: " + classes);

        $(this).hasClass("external") ? googleAnalytics(url) :
        $(this).hasClass("anchor") ? console.log("Handle anchor") : console.log("Handle local");

    });
});

谷歌分析部分可以忽略，但是现在你知道链接的类型后，这可能是你想要对URL进行操作的地方。只需在三元块内添加代码。 如果您只想检查一种类型的链接，则将三元运算符替换为if语句。

编辑以添加我遇到的一个问题。我的一些hrefs是"/Courses/"这样的。我进行了本地页面的检查，检查是否在href的开头和结尾有斜杠。虽然仅检查开头是否有'/'可能已经足够。

0

这对我有效：

function strip_scheme( url ) {
    return url.replace(/^(?:(?:f|ht)tp(?:s)?\:)?\/\/(www\.)?/g, '');
  }

  function is_link_external( elem ) {
    let domain = strip_scheme( elem.attr('href') );
    let host = strip_scheme( window.location.host );

    return ! domain.indexOf(host) == 0;
  }
0

我在jQuery中使用这个函数：

$.fn.isExternal = function() {
  var host = window.location.host;
  var link = $('<a>', {
    href: this.attr('href')
  })[0].hostname;
  return (link !== host);
};

使用方法为：$('a').isExternal();

示例：https://codepen.io/allurewebsolutions/pen/ygJPgV

0

是的，我相信您可以使用location.href获取当前域名。另一个可能性是创建一个链接元素，将src设置为/，然后检索规范URL（如果您使用基本URL，则会检索基本URL，而不一定是域名）。

还可以参考这篇文章：从链接的href属性中获取完整的URI

0
截至2023年，我这样做很有效。
export function isInternalLink(urlString: string): boolean | {
  pathname: string;
} {
  const url = new URL(urlString);
  if (url.origin !== window.location.origin) {
    return false;
  }
  return {
    pathname: url.pathname,
  };
}
0

这并不完全符合问题中“不能硬编码我的域名”的先决条件，但我在寻找类似解决方案时发现了这篇文章，并且在我的情况下，我可以硬编码我的URL。我的担忧是警告用户他们正在离开网站，但如果他们留在网站上，包括子域名（例如：blog.mysite.com，在大多数其他答案中都会失败）。因此，这是我的解决方案，它从上面得票最高的答案中提取了一些要点：

Array.from( document.querySelectorAll( 'a' ) ).forEach( a => {
  a.classList.add( a.hostname.includes("mywebsite.com") ? 'local' : 'external' );
});

$("a").on("click", function(event) {
  if ($(this).hasClass('local')) {
    return;
  } else if ($(this).hasClass('external')) {
    if (!confirm("You are about leave the <My Website> website.")) {
      event.preventDefault();
    }
  }
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接