next.js 如何检测链接是否会将您带到另一个页面？

fnvucqvd 于 2022-11-05 发布在其他

关注(0)|答案(2)|浏览(128)

假设我有一个名为linksToAnotherPage的函数，它接收到一个href。我如何检查该href是否将您带到另一个页面，或者它是否是tel:、mailto:、#anchor-link等，但不会将您带到另一个页面？

function linksToAnotherPage(href) {
 ....
}

linksToAnotherPage('tel:123-456-7890') -> // false
linksToAnotherPage('contact') -> // true

// does not link to another page

<a href="tel:123-456-7890">123-456-7890</a>
<a href="mailto:email@example.com">Send Email</a>
<a href="#start-now">Start Now</a>

// links to another page
<a href="contact">Send Email</a>

--
更新：以下是我根据收到的答案提出的当前解决方案

function isInteractiveHref (href) {
        return (
            href.startsWith("mailto:") || href.startsWith("tel:") || 
            href.startsWith("#")
        )        
    }

    isInteractiveHref(props.href) ? (
        <Link href={props.href}>
            <a>Does not link to another page</a>
        </Link>
    ) : <Link href={'/' + props.href}>
            <a> Links to another page</a>
        </Link>

next.js

来源：https://stackoverflow.com/questions/74250507/how-to-detect-if-a-link-takes-you-to-another-page

2条答案

按热度按时间

ztmd8pv51#

你可以只使用一个简单的if语句，有有限的类型的链接，将转到另一个页面：

以“/”开头的链接
以“http：//"、“https：//"或“wwww”开头的链接。

所以，我认为这个功能可以帮助：

function linksToAnotherPage(href) {
   if (href.startsWith("/") || href.startsWith("http://" || href.startsWith("https://" || href.startsWith("www."){
      ....
   }
}

赞(0）回复(0）举报 2022-11-05

5kgi1eie2#

function linksToAnotherPage(href) {
  if(['tel','mailto'].some(i=>href.startsWith(`${i}:`))) return false;
  let a = new URL(window.location.href);
  let b = new URL(href, window.location.href);
  return !['protocol', 'host', 'pathname', 'search']
    .every(i=>a[i]===b[i]);
}

您可以在此处找到可能需要额外匹配的URL前缀列表：https://en.wikipedia.org/wiki/List_of_URI_schemes

赞(0）回复(0）举报 2022-11-05

我来回答

next.js 如何检测链接是否会将您带到另一个页面？

2条答案

相关问题

热门标签

最新问答