内部リンクと外部リンクの違い

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つあります。イメージ用の1つのリンク、イメージヘッダー用のリンク、イメージの詳細用のリンクなど。ですから、私は4つの新しいモデルオブジェクトを導入し、それぞれのモデルオブジェクトをコントローラに設定します。だから私はそれをビューで比較することが可能であることを望む。

Answer 1

こちらをご覧ください。 indexOfを使用してとwindow.location.originを比較します。それが見つかった場合、それはwindow.location = hrefを変更し、そうでない場合はそれが私の答えは、サーバーベースであるanchor.click()

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'); 
 
    } 
 
    }) 
 
})

<!--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>

Answer 2

をトリガします。 modelを使用してビューを塗りつぶすコントローラは、現在のRequest.Url.Hostを持つ各イメージitem.ImageURLホストを比較します。それらが異なる場合（リンクが外部の場合）、画像リンク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>