記事一覧

リンクを新しいタブや新しいウィンドウで開いたことを検知する方法 | asp.net


今回は asp.net において リンク(aタグやハイパーリンクなど)を右クリックで新しいタブやウィンドウで開いた場合にそれを検知する方法をご紹介いたします。
右クリックメニューだけでなく、リンクは Ctrl または Shift ボタンを同時に押しながらクリックすると新しいタブやウィンドウで開いてしまいますので、同時押しの対応も必要です。


aspnet_newtabpage_01.png


前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2010 Professional 以降
・VB.NET
・.Net Framework 4.0 以降



1.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>



2.Javascript の実装

Ctrl や Shift ボタンを押しながらリンクをクリックした場合、または右クリックメニューから新しいタブやウィンドウで開くを選択した場合の対応をします。
ここでは、右クリックをした時点でリンクの href の設定してある URL を変更してしまいます。その代わり、左クリック時に Ctrl や Shift が同時に押されていない場合は href の設定を元に戻しています。

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.includes('newtab') == false) {
$(this).prop('href', href + '?newtab=true');
}
}
else {
//クエリ文字列が含まれている場合は削除
if (href.includes('newtab') == true) {
$(this).prop('href', href.replace('?newtab=true', ''));
}
}
});

//右クリックメニューから新しいタブやウィンドウを開く場合のフラグ付け
$('.link-field a').on('contextmenu', function (e) {
var href = $(this).prop('href').toLowerCase();
//クエリ文字列が含まれていない場合は付与
if (href.includes('newtab') == false) {
$(this).prop('href', href + '?newtab=true');
}
});



3.動作の確認

上記の実装ができましたら、動作を確認します。

(1)リンクを右クリックして新しいタブやウィンドウで開いた場合は、新しいタブやウィンドウのURLに クエリ文字列 "?newtab=true" が付与されています。

(2)リンクを Ctrl や Shift ボタンを押しながら開いた場合も、新しいタブやウィンドウのURLに クエリ文字列 "?newtab=true" が付与されています。

(3)通常通りリンクをクリックした場合は、同じタブでリンクに設定してあるURLが開きます。

aspnet_newtabpage_02.png


あとは画面遷移した先のページで Page.Request.QueryString("newtab") でクエリ文字列が取得できますので、True/False の判定を行えば良いだけです。
ただし、ユーザーがURLをコピペして開いたり、開いたページのURLを編集した場合は正しく検知・判定することができませんので、不正防止の仕組みは別途必要かと考えます。




最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。


関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。