コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
リンクを新しいタブや新しいウィンドウで開いたことを検知する方法 | asp.net
- 2018/05/15
- 21:13
今回は asp.net において リンク（aタグやハイパーリンクなど）を右クリックで新しいタブやウィンドウで開いた場合にそれを検知する方法をご紹介いたします。
右クリックメニューだけでなく、リンクは Ctrl または Shift ボタンを同時に押しながらクリックすると新しいタブやウィンドウで開いてしまいますので、同時押しの対応も必要です。
前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2010 Professional 以降
・VB.NET
・.Net Framework 4.0 以降
１．aspx の構成
ハイパーリンクまたは a タグを配置し、後で実装するJavascriptファイルを読み込みます。※リンクボタンやボタンだとポストバックしてしまう為、新しいタブやウィンドウで開くことはできません。
ListViewTest.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ListViewTest.aspx.vb" Inherits="ListViewTest.ListViewTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ListViewSample</title>
<link rel="stylesheet" type="text/css" href="~/Styles/Style.css" media="all" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/common.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="table-area">
<asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table>
<thead>
<tr>
<th runat="server" class="id-field">
<label>ID</label>
</th>
<th runat="server" class="link-field">
リンク
</th>
</tr>
</thead>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td runat="server" class="id-field">
<asp:Label ID="lblID" runat="server" Text='<%# (Eval("ID")) %>'></asp:Label>
</td>
<td runat="server" class="link-field">
<asp:HyperLink NavigateUrl="~/ListViewTest.aspx" runat="server">リンク</asp:HyperLink>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</div>
</body>
</html>
２．Javascript の実装
Ctrl や Shift ボタンを押しながらリンクをクリックした場合、または右クリックメニューから新しいタブやウィンドウで開くを選択した場合の対応をします。ここでは、右クリックをした時点でリンクの href の設定してある URL を変更してしまいます。その代わり、左クリック時に Ctrl や Shift が同時に押されていない場合は href の設定を元に戻しています。ただし、IE では click イベントで Ctrl ボタンの同時押しが検知できませんので、mousedown イベントで判定を行っております。
common.js
$(function () {
//左クリック時の新しいタブやウィンドウを開く場合のフラグ付け
$('.link-field a').click(function (event) {
var keyEvent = event || window.event;
var href = $(this).prop('href').toLowerCase();
//ShiftやCtrlボタンを押しながらクリックした場合
if (keyEvent.ctrlKey ||
keyEvent.shiftKey) {
//クエリ文字列が含まれていない場合は付与
if (href.indexOf('newtab') <= 0) {
$(this).prop('href', href + '?newtab=true');
}
}
else {
//クエリ文字列が含まれている場合は削除
if (href.indexOf('newtab') > 0) {
$(this).prop('href', href.replace('?newtab=true', ''));
}
}
});
//IEのコントロール同時押し対策
$('.link-field a').mousedown(function (event) {
if (event.ctrlKey) {
//クエリ文字列が含まれていない場合は付与
var href = $(this).prop('href').toLowerCase();
if (href.indexOf('newtab') <= 0) {
$(this).prop('href', href + '?newtab=true');
}
}
});
//右クリックメニューから新しいタブやウィンドウを開く場合のフラグ付け
$('.link-field a').on('contextmenu', function (e) {
var href = $(this).prop('href').toLowerCase();
//クエリ文字列が含まれていない場合は付与
if (href.indexOf('newtab') <= 0) {
$(this).prop('href', href + '?newtab=true');
}
});
});
３．動作の確認
上記の実装ができましたら、動作を確認します。（１）リンクを右クリックして新しいタブやウィンドウで開いた場合は、新しいタブやウィンドウのURLに クエリ文字列 "?newtab=true" が付与されています。
（２）リンクを Ctrl や Shift ボタンを押しながら開いた場合も、新しいタブやウィンドウのURLに クエリ文字列 "?newtab=true" が付与されています。
（３）通常通りリンクをクリックした場合は、同じタブでリンクに設定してあるURLが開きます。
あとは画面遷移した先のページで Page.Request.QueryString("newtab") でクエリ文字列が取得できますので、True/False の判定を行えば良いだけです。
ただし、ユーザーがURLをコピペして開いたり、開いたページのURLを編集した場合は正しく検知・判定することができませんので、不正防止の仕組みは別途必要かと考えます。
最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。
- 関連記事
-
- UpdatePanel 内での Slick.js の使用方法 -非同期通信後のスライダー表示方法- | asp.net
- アプリケーションルートの変更方法 -デバッグ編- | asp.net
- リンクを新しいタブや新しいウィンドウで開いたことを検知する方法 | asp.net
- jQuery Validation Engine におけるボタン２度押し防止の対策方法 | asp.net
- イベントの発生順序 | asp.net
