Href 行为 - 需要明确 [重复]答案

【问题标题】：Href behaviour - need clarity [duplicate]Href 行为 - 需要明确 [重复]
【发布时间】：2020-10-03 15:59:24
【问题描述】：

我网站的个人资料页面上有这样的代码。

<div class="col-md-4">
    <h2 class="textclass2" style="text-decoration: underline; margin-bottom: 10px"><%=playerdata.Player_Name%>   AKA  <%=playerdata.Player_NickName%></h2>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_FBLink%>" id="fbclick" onClick="checkUrl()" style="font-size: 12px; color:#40FF40; margin-bottom: 10px "> Facebook </a>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_InstagramLink%>" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> Instagram </a>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_LinkedinProfile%>" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> LinkedIN </a>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_TwitterLink%>" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> Twitter </a>

这是使用 EJS 完成的。它们基本上是具有用户社交页面 URL 字符串的 href 标签。后端是一个MongoDB

问题 - 如果我在数据库的相应字段中输入有效的 URL，我将被重定向到正确的 URL。但是，如果字符串为空，它会向 /profile/:username 发送 GET 请求。

这是href标签通常的行为方式吗？如果是，有什么方法可以规避。基本上，如果字符串为空，我不想执行 GET 调用，而只是向用户显示一条消息，说明字符串为空。

【问题讨论】：

你可以不渲染 href <%=playerdata.Player_FBLink ? 'href="' + playerdata.Player_FBLink + '"' : ''%>
一个空的href只是链接到当前位置
在 FB 的 url 上有 onClick checkUrl() 这将挑衅地调用这个函数。从代码行为不清楚，空URL将始终指向同一页面，请分享更多代码或解释更多。可能您还有一个内部函数，该函数之前被调用过。您需要调试代码以查看代码执行流程

标签： javascript href ejs

【解决方案1】：

如果没有href，那么<a> 的行为就像<span>。如果有一个空白href，那么它将从地址栏中的任何 URL 继承它。因此，如果没有，则一种选择是根本不打印链接，例如 Twitter 链接

如果你想显示一些警报，其他选项是使用 href:script

  <% if (playerdata.Player_TwitterLin) { %>
    <a class="btn btn-dark btn-xs" href="<%=playerdata.Player_TwitterLink%>" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> Twitter </a>
  <% } else { %>
  <a class="btn btn-dark btn-xs" href="javascript:alert('Twitter link not available')" role="button" style="font-size: 12px; color:#40FF40; margin-bottom: 10px"> Twitter </a>
  <% } %>

【讨论】：