[研究]]JavaScript] 用 orangehill / bootstrap-session-timeout 做 Session Time Out 前 N 秒自動彈出對話盒視窗
2020-11-18
orangehill / bootstrap-session-timeout
最後版本1.0.3，於 2015-07-17釋出
https://github.com/orangehill/bootstrap-session-timeout
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="WebApplication11.Default" %>
<!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></title>
<%--bootstrap 和 jQuery 用 NuGet 安裝--%>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-3.5.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<%--bootstrap-session-timeout.js 去官方網站手動下載，放到 Scripts 目錄
https://github.com/orangehill/bootstrap-session-timeout
--%>
<script src="Scripts/bootstrap-session-timeout.js"></script>
</head>
<body>
<%--參考
https://github.com/orangehill/bootstrap-session-timeout/blob/master/examples/basic.html
--%>
<form id="form1" runat="server">
<div>
<p>Shows the warning dialog after 3 seconds. <br />
If user takes no action (interacts with the page in any way),
browser is redirected to redirUrl.
On any user action (mouse, keyboard or touch) the timeout timer is reset. </p>
</div>
</form>
<script>
$.sessionTimeout({
keepAliveUrl: 'keep-alive.html',
logoutUrl: 'login.html',
redirUrl: 'locked.html',
warnAfter: 3000,
redirAfter: 10000
});
</script>
</body>
</html>
|
結果
********************************************************************************
補充：結果等了 3 秒沒反應，或者出現下面錯誤，請檢查 bootstrap-session-timeout.js 內容是否正確。
********************************************************************************
補充：若因某原因在 bootstrap-session-timeout.cs 之前後都載入 jquery,js
<script src="Scripts/jquery-3.5.1.js"></script> <script src="Scripts/bootstrap.js"></script> <script src="Scripts/bootstrap-session-timeout.js"></script> <script src="Scripts/jquery-3.5.1.js"></script> |
或 jquery.js 和 bootstrap.js 在 bootstrap-session-timeout.js.js 之後
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/bootstrap-session-timeout.js.js"></script>
<script src="Scripts/jquery-3.5.1.js"></script>
<script src="Scripts/bootstrap.js"></script> |
或 <asp:ScriptReference Name="jquery" />
會有下面錯誤
錯誤: 物件沒有支援這個屬性或方法 'sessionTimeout'
********************************************************************************
補充：若 jquery 在 bootstrap-session-timeout.cs 之後都載入
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap-session-timeout.js"></script>
<script src="Scripts/jquery-3.5.1.js"></script> |
會有下面錯誤
錯誤: Bootstrap's JavaScript requires jQuery
(完)
沒有留言:
張貼留言