Question

我有一张图片，点击后会重定向到另一个页面。我需要一种方法来了解链接是内部的（应用程序的页面）还是外部链接。如果链接是外部的，我希望它在新选项卡中弹出，如果它是在同一选项卡中的内部弹出。

这是代码部分。

<a class="lnkImage" href="@item.ImageURL" target="_blank">
  <img id="PrivateimgPreview" src="@item.ActualImage" />
</a>

ImageURL和实际图像来自模型。基本上我想要这个功能。

if(External)
{
    <a class="lnkImage" href="@item.ImageURL" target="_blank">
      <img id="PrivateimgPreview" src="@item.ActualImage" />
    </a>
}
else if(internal)
{
    <a class="lnkImage" href="@item.ImageURL">
      <img id="PrivateimgPreview" src="@item.ActualImage" />
    </a>
}

我知道通过使用Request.Url.Host，我可以获取主机并进行比较，但这意味着要对其进行硬编码，并且必须在不同的主机中进行更改。有没有办法在视图中一般找出@ item.ImageURL的域名？

更新：我可以为我的网站域和控制器中@ item.ImageURL的域做Request.URL，并在我的模型中设置一个布尔值，但我有4个这样的部分。图像的一个链接，一个用于图像标题，一个用于图像细节，依此类推。所以这将让我介绍4个新的模型对象，在控制器中设置它们中的每一个。所以我希望可以在视图中对它进行比较。

Answer 1

请查看此内容。它使用href将window.location.origin与indexOf进行比较。如果找到，则会更改window.location = href，如果没有，则会触发anchor.click()

＆＃13;

var ls = Array.from(document.querySelectorAll(".lnkImage img"));
ls.forEach(function(l) {
  l.addEventListener('click', function(e) {
    var ori = window.location.origin;
    var hr = this.parentNode.href;
    if (hr.indexOf(ori) >= 0) {
      window.location = hr;
      console.log('internal');
    } else {
      this.parentNode.click();
      console.log('external');
    }
  })
})

＆＃13;

<!--internal-->
<a class="lnkImage" href="http://stacksnippets.net" target="_blank">
  <img id="PrivateimgPreview" src="@item.ActualImage" />
</a>

<!--external-->
<a class="lnkImage" href="http://othersite.com/test" target="_blank">
  <img id="PrivateimgPreview" src="@item.ActualImage" />
</a>

＆＃13;

Answer 2

我的回答是基于服务器的。用模型填充视图的控制器比较每个图像项.ImageURL主机与当前的Request.Url.Host。如果它们不同（链接是外部的），则将属性添加到图像链接target =“_ blank”，如果相同 - 它会添加target =“_ self”。请参阅下面的示例代码，您可以根据需要轻松调整它。

//controller
public ActionResult Index() {
  var model = new CustomModel {
    ImageItems = GetImageItems()
  };
  //set link target for view based on image url
  foreach (var imageItem in model.ImageItems) {
    imageItem.LinkTarget = GetLinkTarget(imageItem.ImageURL);
  }
  return View(model);
}

private string GetLinkTarget(string linkUrl) {
  var url = new Uri(linkUrl);
  return url.Host == Request.Url.Host ? "_self" : "_blank";
}

//view
<div>
@{
    foreach (var imageItem in Model.ImageItems) {
        <a class="lnkImage" href="@imageItem.ImageURL" target="@imageItem.LinkTarget">
            <img id="PrivateimgPreview" src="@item.ActualImage" />
        </a>
  }
}
</div>

内部和外部链接之间的差异

2 个答案: